Am'm cu un timp de greu obtinerea capul meu în jurul scalarea font.
Am în prezent acest site, cu un corp font-size
de 100%. 100% de ce, totuși? Acest lucru pare a calcula la 16 pixeli.
Am fost sub impresia că 100% ar fi cumva se referă la dimensiunea ferestrei browser-ului, dar se pare că nu, deoarece's mereu 16 pixeli dacă fereastra este redimensionată până la o lățime mobil sau cu sufletul la gură complet lat desktop.
Cum pot face ca textul de pe site-ul meu de scară în ceea ce privește ambalajul său? Am încercat, folosind "le", dar acest lucru nu't scara ori.
Raționamentul meu este că lucrurile place meniul meu devenit strivit atunci când redimensionați, așa că am nevoie pentru a reduce px
font-size
de .menuItem
, printre alte elemente, în raport cu lățimea containerului. (De exemplu, în meniul de pe un desktop mare, 22px
functioneaza perfect. Mutare în jos pentru tableta lățime și 16 pixeli este mai potrivit.)
Am'm conștienți pot adăuga puncte de întrerupere, dar chiar vreau text la scară cât mai bine ca având suplimentar de puncte de întrerupere, în caz contrar I'll end up cu sute de puncte de întrerupere pentru fiecare 100 pixeli scădere în lățime pentru a controla text.
EDIT: Dacă recipientul nu este corpul CSS Trucuri acoperă toate opțiunile în Încadrează Textul într-un Container.
Dacă recipientul este corpul, ceea ce cauti este Viewport-procent lungimi:
viewport-procent lungimi sunt relative la dimensiunea de inițiale conțin bloc. Atunci când înălțimea sau lățimea inițială care conține blocul este schimbat, ele sunt scalate în mod corespunzător. Cu toate acestea, atunci când valoarea de preaplin pe elementul rădăcină este auto, orice bare de defilare se presupune că nu există.
Valorile sunt:
vw
(% din lățime viewport)ek
(% din viewport înălțime)vi
(1% din dimensiunea viewport în direcția de elementul rădăcină's inline axa)vb
(1% din dimensiunea viewport în direcția de elementul rădăcină's a bloca axa)vmin
(mai mici de vw
sau ek
)vmax
(mai mare sau vw " sau " vh`)1 v* este egală cu 1% din valoarea inițială conțin bloc.
Folosind se pare ca acest lucru:
p {
font-size: 4vw;
}
După cum puteți vedea, atunci când lățime viewport crește, deci, nu-dimensiunea fontului, fără a fi nevoie să utilizați interogări mass-media.
Aceste valori sunt o dimensionare unitate, doar ca px
sau i
, astfel încât acestea pot fi folosite la dimensiuni de alte elemente, cum ar fi lățimea, marja, sau de umplutură.
Sprijin Browser-ul este destul de bun, dar'll probabil nevoie de un plan de rezervă, cum ar fi:
p {
font-size: 16px;
font-size: 4vw;
}
Check out statistici de sprijin: http://caniuse.com/#feat=viewport-units.
De asemenea, a verifica afară CSS-Trucuri pentru o privire mai largă: Viewport Dimensiuni Tipografie
Aici's un articol frumos despre setarea minimă/maximă dimensiuni și exercite un pic mai mult control asupra dimensiuni: control Precis asupra receptiv, tipografie
Și aici's un articol despre setarea dimensiune folosind calc (), astfel încât textul să umple viewport: http://codepen.io/CrocoDillon/pen/fBJxu
De asemenea, vă rugăm să consultați acest articol, care folosește o tehnică numită 'topită de conducere' pentru a regla line-height fel de bine. Topit Lider în CSS
Această întrebare este întrebat într-un comentariu de Alex sub acceptat raspuns.
Acest fapt nu înseamnă vw
nu poate fi utilizat într-o oarecare măsură dimensiune pentru acel container. Acum pentru a vedea orice variație de la toate trebuie sa fie presupunând că recipientul într-un fel este flexibil în dimensiune. Dacă printr-o direct procentul de "lățime" sau prin a fi 100% minus margini. Punctul devine "de discuție" în cazul în care recipientul este întotdeauna setat la, las's spun, 200px
larg ... și pe urmă să setați o font-size
care lucreaza pentru lățime.
Exemplul 1
Cu o latime container flexibil, cu toate acestea, trebuie înțeles că într-un fel de container este încă în curs de dimensiuni pe viewport. Ca atare, este o chestiune de ajustare a o vw
setarea pe off acest procent diferența de mărime a ferestrei, care înseamnă a lua în considerare dimensionarea părinte ambalaje. [Ia acest exemplu][2]:
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Presupunând că aici div
este un copil al "organismului", este 50%
de că 100%
lățime, care este dimensiunea ferestrei în acest caz de bază. De fapt, doriți să setați o vw
, care este de gând să arate bine pentru tine. După cum puteți vedea în comentariul meu de mai sus CSS conținut, puteți "cred" prin care din punct de vedere matematic cu privire la full dimensiunea viewport, dar nu't nevoie de a face asta. Textul este de gând să "flex" cu container, pentru că recipientul este încordat cu viewport redimensionare. UPDATE: [aici's un exemplu de două containere de dimensiuni diferite][3].
Exemplu 2
Te pot ajuta asigura viewport dimensionare prin forțarea calcul bazat pe asta. [Luați în considerare acest exemplu][4]:
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Dimensionarea se bazează în continuare pe fereastra, dar este, în esență, înființat bazat pe dimensiunea containerului în sine.
Dacă dimensionarea recipientului element de ajuns schimbarea dinamic procentul său de relație, fie prin `@mass-media puncte de pauză sau prin intermediul JavaScript, atunci orice bază "țintă" a fost nevoie de recalculare a menține aceeași "relația" pentru dimensionarea textului.
Ia exemplu #1 de mai sus. Dacă div
a fost trecut la 25% lățime de ori
@mass-media sau JavaScript, apoi, în același timp, font-size
ar avea nevoie pentru a ajusta în interogare mass-media sau prin JavaScript pentru noul mod de calcul al 5vw * .25 = 1.25
. Acest lucru ar pune dimensiunea textului la aceeași dimensiune ar fi fost avut "lățime" de original 50%
container fost redus la jumătate din fereastra de dimensionare, dar acum a fost redusă din cauza la o schimbare în propria procentul de calcul.
O Provocare
Cu CSS3 calc()
funcția în uz, va deveni dificil să se adapteze în mod dinamic, ca această funcție să nu lucreze pentru font-size
sensul în acest moment. Deci, ai putea face un pur CSS 3 ajustare dacă lățimea este schimbarea pe calc(). Desigur, un minor de ajustare a lățimii de marja nu poate fi suficient pentru a justifica orice schimbare în
font-size`, deci poate că nu contează.
Soluție cu SVG:
<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
Soluție cu SVG și încadrare text folosind foreignObject
:
<svg viewBox="0 0 100 100">
<foreignObject width="100%" height="100%">
<h1>heading</h1>
lorem ipsum dolor sit amet
</foreignObject>
</svg>
https://jsfiddle.net/2rp1q0sy/
Într-unul din proiectele mele eu folosesc un "amestec" intre vw si vh pentru a ajusta dimensiunea fontului pentru nevoile mele, de exemplu:
font-size: calc(3vw + 3vh);
Știu că acest lucru nu't răspunde la OP's cauză, dar poate fi o soluție pentru oricine altcineva.
Nu este o mare filozofie pentru această problemă.
Cel mai simplu lucru de făcut ar fi să dau un anumit font-size pentru corp (eu recomand 10), și apoi toate celelalte element ar fi fontul lor în i
sau rem
.
Am'll vă dau un exemplu pentru a înțelege aceste unități.
"Le" este întotdeauna în raport cu părintele său:
body{font-size: 10px;}
.menu{font-size: 2em;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5em;} /* That means 1.5*20 pixels = 30 pixels */
Rem
este întotdeauna relativă a corpului:
body{font-size: 10px;}
.menu{font-size: 2rem;} /* That means 2*10 pixels = 20 pixels */
.menu li{font-size: 1.5rem;} /* that means 1.5*10 pixels = 15 pixels */
Și atunci ai putea crea un script care ar modifica font-size raport cu lățimea containerului. Dar acest lucru nu't ceea ce mi-ar recomanda. Pentru că într-o 900 de pixeli lățime container de exemplu, ar fi un " p " element cu 12 pixeli font-size las's spun. Și pe ideea că ar putea deveni un 300 de pixeli lățime container la 4 pixeli font-size. Trebuie să existe o limită inferioară.
Alte soluții ar fi cu interogări mass-media, astfel încât să puteți seta fontul pentru diferite lățimi.
Dar soluțiile pe care le-ar recomanda este de a utiliza o bibliotecă JavaScript care vă ajută cu asta. Și fittext.js pe care am găsit până acum.
Acest lucru este exact ce nu OP cere, dar poate face cineva's day. Acest răspuns nu este de lingură feedingly ușor și are nevoie de unele de cercetare pe dezvoltator end.
Am venit în cele din urmă pentru a obține un pur-CSS soluție pentru acest lucru, folosind calc()
cu unități diferite. Veți avea nevoie de unele matematice de bază, înțelegerea de formule pentru a lucra în exprimare pentru calc()
.
Când am lucrat la asta, am avut pentru a obține o pagină întreagă lățime receptiv antet cu unele padding puțini părinți în DOM. Am'll folosi valorile mele aici, înlocuiți-le cu propriul tău.
Veți avea nevoie de:
padding: 3em
și lățime completă trebuie să 100wv - 2 * 3em
X este lățimea de container, deci, înlocuiți-l cu propriul dvs. de exprimare sau reglați valoarea pentru a obține full-pagină de text. "R" este raportul va avea. Puteți să-l prin ajustarea valorilor în unele viewport, inspectarea element lățime și înălțime și înlocuindu-le cu propriile valori. De asemenea, este latime / inaltime
;)
x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3
y = x / r
= (100vw - 6em) / (28 / 3)
= (100vw - 6em) * 3 / 28
= (300vw - 18em) / 28
= (75vw - 4.5rem) / 7
Și bang! Ea a lucrat! Am scris
font-size: calc((75vw - 4.5rem) / 7)
să-mi antet și s-a adaptat bine în fiecare viewport.
Avem nevoie de unele constante până aici. 100vw
înseamnă întreaga lățime viewport, iar scopul meu a fost de a stabili full-lățime heder cu unele padding.
Raportul. Obtinerea o lățime și înălțime într-un viewport mi-am luat un raport pentru a juca cu, și cu raportul știu ce înălțime ar trebui să fie în alte lățime viewport. Calcularea le cu mâna-ar lua o multime de timp și cel puțin să ia o mulțime de lățime de bandă, astfel încât acesta'nu e un răspuns bun.
Mă întreb de ce nimeni nu și-a dat seama de acest lucru și unii oameni sunt chiar spune că acest lucru ar fi imposibil să se joace cu CSS. Eu nu't place sa folosesc JavaScript în elemente de adaptare, așa că don't accepta JavaScript (și să uitați despre jQuery) răspunsuri, fără a săpat mai mult. Toate în toate, l's bine că asta am dat seama că și acesta este un pas pur-CSS implementări în web design.
Imi cer scuze de orice neobișnuit convenție în textul meu, am'nu sunt vorbitor nativ în limba engleză și sunt, de asemenea, destul de nou pentru scris Stiva Preaplin răspunsuri.
De asemenea, ar trebui menționat faptul că am rău derulare în unele browsere. De exemplu, atunci când se utilizează Firefox am observat ca 100vw
înseamnă întreaga lățime viewport, prelungire sub bara de defilare (în cazul în care conținutul nu poate extinde!), deci, fullwidth text trebuie să fie încadrat cu atenție și, de preferință, să testat cu mai multe browsere și dispozitive.
Aici este funcția:
document.body.setScaledFont = function(f) {
var s = this.offsetWidth, fs = s * f;
this.style.fontSize = fs + '%';
return this
};
Apoi converti toate documentele copil element dimensiuni de font pentru a " le " 's sau %
.
Apoi se adaugă ceva de genul asta la cod pentru a seta baza dimensiunea fontului.
document.body.setScaledFont(0.35);
window.onresize = function() {
document.body.setScaledFont(0.35);
}
[
][1]Există o modalitate de a face acest lucru fără JavaScript!
Aveți posibilitatea să utilizați o linie de imagine SVG. Puteți utiliza CSS pe o SVG dacă este inline. Trebuie să ne amintim că, folosind această metodă înseamnă imagine SVG va răspunde la dimensiunea containerului.
Încercați să utilizați următoarea soluție...
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
<text>SAVE $500</text>
</svg>
</div>
div {
width: 50%; /* Set your container width */
height: 50%; /* Set your container height */
}
svg {
width: 100%;
height: auto;
}
text {
transform: translate(40px, 202px);
font-size: 62px;
fill: #000;
}
Exemplu:
Vrei ceva mai sclipitor?
Imaginile SVG permite, de asemenea, de a face lucruri interesante cu forme și nedorite. Check out acest mare caz de utilizare pentru scalabile text...
https://jsfiddle.net/k8L4xLLa/14/
Acest lucru nu poate fi foarte practic, dar dacă vrei un font să fie o funcție directă de mamă, fără a avea nici un JavaScript care ascultă/bucle (interval) pentru a citi dimensiunea div/pagină, există o modalitate de a face asta. Iframe.
Nimic în iframe va lua în considerare dimensiunea de iframe ca dimensiunea viewport. Deci, truc este de a face doar un iframe căror lățime este lățimea maximă doriți ca textul să fie, și a cărui înălțime este egală cu înălțimea maximă * la text special's raportul de aspect.
Anularea limitării că viewport unități pot't, de asemenea, veni de-a lungul partea părinte unități de text (ca în, având % dimensiune se comporte ca toți ceilalți), viewport unități oferă un instrument foarte puternic: a fi capabil de a obține minim/maxim de dimensiune. Puteți't face asta oriunde în altă parte - puteți't spun...face înălțime de acest div fi lățimea de părinte * ceva.
Acestea fiind spuse, truc este de a utiliza vmin, și să setați iframe dimensiune, astfel încât [fracțiune] înălțimea totală este un bun dimensiunea fontului atunci când înălțimea este de limitare dimensiune, și [fracțiune] lățime totală atunci când lățimea este de limitare dimensiune. Acest lucru este de ce înălțime trebuie să fie un produs de lățimea și raportul de aspect.
Pentru exemplu, aveți
.main iframe{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: calc(3.5 * 100%);
background: rgba(0, 0, 0, 0);
border-style: none;
transform: translate3d(-50%, -50%, 0);
}
La mică problemă cu această metodă este că va trebui să setați manual CSS iframe. Dacă atașați întreaga fișier CSS, care va dura până o mulțime de lățime de bandă pentru multe zone de text. Deci, ce vreau să faceți este să atașați regula pe care vreau direct din CSS.
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);
Puteți scrie mici, funcție care primește de regulă CSS / toate CSS reguli care ar afecta zona de text.
Nu mă pot gândi la o altă modalitate de a face fără a avea unele ciclism/ascultare JavaScript. Soluția reală ar fi browsere pentru a oferi o modalitate de a scala textul în funcție de containerul părinte și de a oferi, de asemenea, același vmin/vmax tip de funcționalitate.
JSFiddle:
(faceți clic o dată pentru a bloca pătrat roșu cu mouse-ul și faceți clic din nou pentru a elibera)De cele mai multe JavaScript în vioara este doar obiceiul meu de click-drag funcție.
Folosind vw
, i
& co. funcționează sigur, dar OMI întotdeauna e nevoie de un om's atingeți pentru fine-tuning.
Aici's un script am scris bazat pe @tnt-rox' răspunde care încearcă să automatizeze omului's touch:
$('#controller').click(function(){
$('h2').each(function(){
var
$el = $(this),
max = $el.get(0),
el = null
;
max =
max
? max.offsetWidth
: 320
;
$el.css({
'font-size': '1em',
'display': 'inline',
});
el = $el.get(0);
el.get_float = function(){
var
fs = 0
;
if (this.style && this.style.fontSize) {
fs = parseFloat(this.style.fontSize.replace(/([\d\.]+)em/g, '$1'));
}
return fs;
};
el.bigger = function(){
this.style.fontSize = (this.get_float() + 0.1) + 'em';
};
while (el.offsetWidth < max) {
el.bigger();
}
// Finishing touch.
$el.css({
'font-size': ((el.get_float() -0.1) +'em'),
'line-height': 'normal',
'display': '',
});
}); // end of (each)
}); // end of (font scaling test)
div {
width: 50%;
background-color: tomato;
font-family: 'Arial';
}
h2 {
white-space: nowrap;
}
h2:nth-child(2) {
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
<h2>Lorem ipsum dolor</h2>
<h2>Test String</h2>
<h2>Sweet Concatenation</h2>
<h2>Font Scaling</h2>
</div>
Practic reduce font-size a 1em
și apoi începe creșterea cu 0,1 până când se ajunge la lățimea maximă.
[JSFiddle][1]
Singura mea solutie, pe bază de jQuery, funcționează prin crescând treptat dimensiunea fontului până la container devine o mare creștere în înălțime (ceea ce înseamnă că are o întrerupere de linie).
L's destul de simplu, dar funcționează destul de bine, și este foarte ușor de utilizat. Nu't trebuie să știți nimic despre fontul utilizat, totul este luat în grijă de către browser.
Te poți juca cu ea pe
Magia se întâmplă aici:
var setMaxTextSize=function(jElement) {
// Get and set the font size into data for reuse upon resize
var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
jElement.data(quickFitFontSizeData, fontSize);
// Gradually increase font size until the element gets a big increase in height (i.e. line break)
var i = 0;
var previousHeight;
do
{
previousHeight=jElement.height();
jElement.css("font-size", "" + (++fontSize) + "px");
}
while(i++ < 300 && jElement.height()-previousHeight < fontSize/2)
// Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
fontSize -= 1;
jElement.addClass(quickFitSetClass).css("font-size", "" + fontSize + "px");
return fontSize;
};
100% este relativ la baza dimensiunea fontului, care, dacă te-ai't setați-o, ar fi browser-ul's user-agent default.
Pentru a obține efectul're după, mi-ar folosi o bucata de cod JavaScript pentru a regla baza dimensiunea fontului relativ la dimensiuni fereastră.
În interiorul CSS, încercați să adăugați acest lucru la partea de jos a schimba 320 pixeli lățime de oriunde de design începe de rupere:
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
Apoi da-dimensiunea fontului în "px" sau "i" cum doriți.
Încercați http://simplefocus.com/flowtype/. Aceasta este ceea ce am folosi pentru site-urile mele, și a lucrat perfect.
Ai putea fi tu în căutarea pentru ceva de genul asta:
Eu am folosit flowtype, și-l's mare lucru (cu toate acestea's JavaScript și nu o pură CSS soluție):
$('body').flowtype({
minFont: 10,
maxFont: 40,
minimum: 500,
maximum: 1200,
fontRatio: 70
});
Am'am pregătit o scară simplă funcție folosind CSS transforma în loc de font-size. Puteți să-l utilizați în interiorul de orice fel de recipient, nu't trebuie să setați interogări mass-media, etc. :)
Post pe Blog: Latime CSS & JS scalabile antet
Cod:
function scaleHeader() {
var scalable = document.querySelectorAll('.scale--js');
var margin = 10;
for (var i = 0; i < scalable.length; i++) {
var scalableContainer = scalable[i].parentNode;
scalable[i].style.transform = 'scale(1)';
var scalableContainerWidth = scalableContainer.offsetWidth - margin;
var scalableWidth = scalable[i].offsetWidth;
scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
}
}
Demo de lucru: https://codepen.io/maciejkorsan/pen/BWLryj
Problema mea a fost similară, dar legate de scalare text în cadrul unei rubrici. Am încercat a se Potrivi Font, dar am nevoie pentru a comuta compresorul de a obține rezultate, deoarece a fost a rezolva o problemă ușor diferită, după cum era de Text Flow.
Așa că mi-am scris propriul mic plugin care reduce dimensiunea fontului pentru a se potrivi container, presupunând că ai overflow: ascuns " și " white-space: nowrap
, astfel încât, chiar dacă reducerea fontul la minim nu't permite arată întreaga rubrică, doar taie ceea ce se poate arăta.
(function($) {
// Reduces the size of text in the element to fit the parent.
$.fn.reduceTextSize = function(options) {
options = $.extend({
minFontSize: 10
}, options);
function checkWidth(em) {
var $em = $(em);
var oldPosition = $em.css('position');
$em.css('position', 'absolute');
var width = $em.width();
$em.css('position', oldPosition);
return width;
}
return this.each(function(){
var $this = $(this);
var $parent = $this.parent();
var prevFontSize;
while (checkWidth($this) > $parent.width()) {
var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
// Stop looping if min font size reached, or font size did not change last iteration.
if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
prevFontSize && prevFontSize == currentFontSize) {
break;
}
prevFontSize = currentFontSize;
$this.css('font-size', (currentFontSize - 1) + 'px');
}
});
};
})(jQuery);
Nimeni nu a menționat CSS variabile încă, și această abordare a lucrat cel mai bine pentru mine, asa ca:
Las's spun te'am luat-o coloană pe pagina ta, care este de 100% din lățimea de un utilizator de telefonie mobilă's ecran, dar are un max-lățime de 800px, atât pe desktop nu's un spațiu pe ambele părți ale coloanei. Pune acest lucru la partea de sus a paginii:
<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>
Și acum aveți posibilitatea să utilizați ca variabilă (în loc de built-in vw
unitate) pentru a seta dimensiunea fontului. E. g.
p {
font-size: calc( var(--column-width) / 100 );
}
L's nu pur CSS abordare, dar's destul de aproape.
Încercați să utilizați fitText plugin, pentru că Viewport dimensiuni e't de soluție de această problemă.
Trebuie doar să adăugați biblioteca:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Și de a schimba font-size pentru a corecta, prin setările coeficientul de text:
$("#text_div").fitText(0.8);
Puteți seta valorile maxime și minime de text:
$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });