Mam pojemnik, który ma% szerokości i wysokości, więc skaluje się w zależności od czynników zewnętrznych. Chciałbym, aby czcionka wewnątrz kontenera miała stały rozmiar w stosunku do rozmiaru kontenerów. Czy jest na to dobry sposób za pomocą CSS? font-size: x%
By przeskalować czcionki tylko w zależności od pierwotnego rozmiaru czcionki (która jest 100%).
javascript
css
font-size
FurtiveFelon
źródło
źródło
Odpowiedzi:
Możesz to zrobić za pomocą CSS3 przy użyciu obliczeń, jednak najprawdopodobniej bezpieczniej byłoby użyć JavaScript.
Oto przykład: http://jsfiddle.net/8TrTU/
Za pomocą JS możesz zmienić wysokość tekstu, a następnie po prostu powiązać to samo obliczenie ze zdarzeniem zmiany rozmiaru, podczas zmiany rozmiaru, aby skalowało się, gdy użytkownik wprowadza poprawki, lub jakkolwiek zezwalasz na zmianę rozmiaru elementów.
źródło
window.onresize = function(event) { yourFunctionHere(); };
również w ten sposób, jeśli użytkownik zdecyduje się zmienić rozmiar strony po załadowaniu, twoja czcionka zmieni rozmiar odpowiednioJeśli chcesz ustawić rozmiar czcionki jako procent szerokości rzutni, użyj
vw
jednostki:#mydiv { font-size: 5vw; }
Inną alternatywą jest użycie SVG osadzonego w kodzie HTML. To będzie tylko kilka linijek. Atrybut rozmiaru czcionki elementu tekstowego zostanie zinterpretowany jako „jednostki użytkownika”, na przykład te, dla których jest zdefiniowany obszar wyświetlania. Jeśli więc zdefiniujesz rzutnię jako 0 0 100 100, wówczas rozmiar czcionki 1 będzie równy jednej setnej rozmiaru elementu svg.
I nie, nie ma sposobu, aby to zrobić w CSS za pomocą obliczeń. Problem polega na tym, że wartości procentowe używane do określania rozmiaru czcionki, w tym wartości procentowe w obliczeniach, są interpretowane w kategoriach odziedziczonego rozmiaru czcionki, a nie rozmiaru kontenera. W tym celu CSS mógłby użyć jednostki o nazwie
bw
(szerokość pola), więc można powiedziećdiv { font-size: 5bw; }
, ale nigdy nie słyszałem takiej propozycji.źródło
vw
odnosi się to do widocznego obszaru, a nie do rozmiaru kontenera. Prawdopodobnie przydatne w wielu przypadkach, ale svg działał lepiej dla mnie.Kolejna alternatywa js:
Przykład roboczy
fontsize = function () { var fontSize = $("#container").width() * 0.10; // 10% of container width $("#container h1").css('font-size', fontSize); }; $(window).resize(fontsize); $(document).ready(fontsize);
Lub, jak stwierdzono w odpowiedzi Torazaburo, możesz użyć svg. Jako dowód słuszności podałem prosty przykład:
Przykład SVG
<div id="container"> <svg width="100%" height="100%" viewBox="0 0 13 15"> <text x="0" y="13">X</text> </svg> </div>
źródło
Użyłem Fittext w niektórych moich projektach i wygląda na to, że jest to dobre rozwiązanie takiego problemu.
źródło
Nie można tego osiągnąć za pomocą rozmiaru czcionki CSS
Zakładając, że „czynniki zewnętrzne”, do których się odnosisz, mogą zostać odebrane przez zapytania o media, możesz ich użyć - korekty prawdopodobnie będą musiały ograniczać się do zestawu wstępnie zdefiniowanych rozmiarów.
źródło
Oto funkcja:
document.body.setScaledFont = function(f) { var s = this.offsetWidth, fs = s * f; this.style.fontSize = fs + '%'; return this };
Następnie przekonwertuj rozmiary czcionek elementów potomnych wszystkich dokumentów na em lub%.
Następnie dodaj coś takiego do swojego kodu, aby ustawić podstawowy rozmiar czcionki.
document.body.setScaledFont(0.35); window.onresize = function() { document.body.setScaledFont(0.35); }
http://jsfiddle.net/0tpvccjt/
źródło
Miałem podobny problem, ale musiałem wziąć pod uwagę inne kwestie, których przykład @ apaul34208 nie rozwiązał. W moim przypadku;
Nie jest to najbardziej elegancki przykład, ale dla mnie działa. Rozważ użycie ograniczania zmiany rozmiaru okna ( https://lodash.com/ )
var TextFit = function(){ var container = $('.container'); container.each(function(){ var container_width = $(this).width(), width_offset = parseInt($(this).data('width-offset')), font_container = $(this).find('.font-container'); if ( width_offset > 0 ) { container_width -= width_offset; } font_container.each(function(){ var font_container_width = $(this).width(), font_size = parseFloat( $(this).css('font-size') ); var diff = Math.max(container_width, font_container_width) - Math.min(container_width, font_container_width); var diff_percentage = Math.round( ( diff / Math.max(container_width, font_container_width) ) * 100 ); if (diff_percentage !== 0){ if ( container_width > font_container_width ) { new_font_size = font_size + Math.round( ( font_size / 100 ) * diff_percentage ); } else if ( container_width < font_container_width ) { new_font_size = font_size - Math.round( ( font_size / 100 ) * diff_percentage ); } } $(this).css('font-size', new_font_size + 'px'); }); }); } $(function(){ TextFit(); $(window).resize(function(){ TextFit(); }); });
.container { width:341px; height:341px; background-color:#000; padding:20px; } .font-container { font-size:131px; text-align:center; color:#fff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container" data-width-offset="10"> <span class="font-container">£5000</span> </div>
https://jsfiddle.net/Merch80/b8hoctfb/7/
źródło
W tej odpowiedzi
vw
podałem bardziej szczegółową odpowiedź dotyczącą używania w odniesieniu do określonego rozmiaru pojemnika , więc nie będę tutaj powtarzać odpowiedzi.Podsumowując, jest to jednak zasadniczo kwestia uwzględnienia (lub kontrolowania) tego, jaki będzie rozmiar pojemnika w odniesieniu do widocznego obszaru, a następnie ustalenia odpowiedniego
vw
rozmiaru na podstawie tego dla kontenera, biorąc pod uwagę, co musi się stać jeśli coś jest dynamicznie zmieniane.Więc jeśli chcesz mieć
5vw
rozmiar w kontenerze na 100% szerokości75%
widocznego obszaru, to prawdopodobnie chcesz mieć taki rozmiar(5vw * .75) = 3.75vw
.źródło
Jeśli chcesz skalować go w zależności od szerokości elementu, możesz użyć tego komponentu internetowego:
https://github.com/pomber/full-width-text
Sprawdź demo tutaj:
https://pomber.github.io/full-width-text/
Użycie jest takie:
źródło
Możesz także wypróbować tę czystą metodę CSS:
font-size: calc(100% - 0.3em);
źródło