font fallback

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
bij een fontfallback heb ik Orator Std gebruikt

dat is een font bestaande uit (small) caps

maar aangezien niet iedereen dat font zal hebben, heb ik een fallback gemaakt.
gewoon Verdana. maar dat is geen smallcaps font, dus heb ik in de style maar font-variant: small-caps gezet

Code: 
<p style="font-family: Orator Std, Verdana; margin-top: -15px; font-variant: small-caps;">

maar afijn, de oorspronkelijke font-size van orator is groter dan die van verdana.
zodat bv bij en font-size van 12px of 1.0 em, ik noem maar wat, de ene buiten de lijntjes komt.
hoe los ik dat nu op? hoe zeg ik nu tegen de browser: ALS ik verdana gebruik moet je 12px groot zijn, ALS ik orator gebruik moet je 11px groot zijn?
 
Ai! Dat kan je niet zomaar tegen een browser zeggen, want een browser kan en mag niet in Windows of een ander Operating System kijken welke lettertypes er op de kast staan! :confused:

Het kan misschien wel via een omweg en met wat javascript:
  • Je zet ergens twee dezelfde, op scherm onzichtbare woorden: het ene met het "Orator Std" lettertype (met alleen de sans-serif als fall-back, want die zit op elk OS), het andere met de sans-serif zonder iets.
  • Je laat door javascript opmeten of ze even lang en/of hoog zijn.
  • Zo ja, dan zijn het twee sans-serif's, en is de Orator kennelijk niet aan boord.
  • In dat geval laat je javascript ervoor zorgen dat alle <p>'s (enz.) de lettergrootte krijgen die je voor de Verdana (en de fall-backs daarvoor) wilt hebben.
  • Zo nee, dan is er verschil en dus is de Orator er wel.
  • In dat geval laat je javascript ervoor zorgen dat alle <p>'s (enz.) de lettergrootte krijgen die je voor de Orator wilt hebben.
Wie niet sterk is, moet slim zijn! ;)

==========
Andere mogelijkheid:
... de ene buiten de lijntjes komt.
Klik om te vergroten...
Dat kan alleen, als de containers niet rekbaar zijn > dus de containers rekbaar maken (bv. geen vaste hoogte).

==========
Nog een andere mogelijkheid:
Géén Orator gebruiken, maar bij de Google-webfonts zoeken of daar iets bij staat wat in de buurt komt.
Zo'n font kan je koppelen aan de pagina, en dan krijgt iedereen hetzelfde te zien.

Met vriendelijke groet,
CSShunter
 
hallo csshunter
hmmmm, dat is gecompliceerder dan ik dacht.
bovendien vond ik het al raar dat 12px niet bij elk font hetzelfde was, maar dat is het natuurlijk wel.
het gaat hier om de breedte van de letters neem ik aan, anders zou elke lap tekst toch even veel ruimte moeten innemen, ongeacht het font.
12px is immers 12px.

ik denk dat ik voor nummer 3 ga, google-webfonts, dat lijkt me in dit geval de beste optie.

in ieder geval bedankt voor de geboden oplossingen.

Met vriendelijke groet, jeel2008
 
het gaat hier om de breedte van de letters neem ik aan
Klik om te vergroten...
Nop, want niet elke letter hoeft dezelfde breedte te hebben: een proportioneel lettertype als de Arial maakt een eigen breedte per letter, maar bij een monospace lettertype (tikmachineletter) als de Courier is elke letter precies even breed.
  • De css-specificatie zegt: "The font size corresponds to the em square, a concept used in typography."
  • De font-afdeling van Adobe weet te vertellen: "em, em space, em quad: A common unit of measurement in typography. Em is traditionally defined as the width of the uppercase M in the current face and point size."
  • En Wikipedia poneert: "Em (typography). - In digital type, the relationship of the height of particular letters to the em is arbitrarily set by the typeface designer."

=======
12px is immers 12px.
Klik om te vergroten...
Zou je zeggen, maar:

Wat zien we? :shocked:
  • Bij eenzelfde font-size in px: niet alleen de breedte varieert per lettertype, maar ook de hoogte! (bv. gewone Arial: 28px hoog, gewone Verdana: 31px hoog, gewone monospace: 29px hoog)
  • De vette letters hebben een grotere breedte dan de gewone letters van hetzelfde type, maar niet in de monospace! (die geeft exact dezelfde breedte)
  • Bij de proportionele lettertypes Arial en Verdana worden de smallcaps breder (logisch, want de gemiddelde hoofdletter neemt meer ruimte in de breedte in), maar bij de monospace worden de smallcaps juist smaller dan de gewone variant!
  • De gewone en de vette variant zijn even groot in Firefox, Chrome, Opera en IE7; maar de smallcaps niet! (bv. de smallcaps Arial in de zuinige Chrome: 332px breed; in Opera: 340px breed; in Firefox: 351px breed; en in de slokop IE7: 364px breed)
  • En nog los hiervan: IE7 maakt een Courier (een mono'tje) veel groter dan alle andere browsers.
  • NB: Dit alles op één Operating System, en bij dezelfde (1280*1024px) resolutie. Bij vergelijkingen met andere OS'sen en andere resoluties komen wellicht nog meer verschillen naar boven drijven.

Conclusie: er is geen peil op te trekken met die fonts!
Dat pleit er temeer voor om elementen waar fonts in zitten heel erg flexibel te maken: bv. geen hoogte opgeven, dan kunnen ze meerekken en krimpen met wat de browser van een font wil maken.

Dat was weer een leuke exercitie!
En inderdaad, de Google-fonts kunnen een uitkomst bieden als je heel erg graag een ander tiepje dan normaal wilt presenteren.

Met vriendelijke groet,
CSShunter
__________
O ja, deze nog: als een lettertype bestaat uit twee of meer woorden met een spatie, moet dat in de css tussen aanhalingstekens gezet worden. Dus bv.:
Code: 
body {
    font-family: "Trebuchet MS", arial, helvetica, sans-serif;
    }
 
Laatst bewerkt:
letters



  • Nop, want niet elke letter hoeft dezelfde breedte te hebben: een proportioneel lettertype als de Arial maakt een eigen breedte per letter, maar bij een monospace lettertype (tikmachineletter) als de Courier is elke letter precies even breed.
    Klik om te vergroten...
    ja, dit bedoelde ik ook eigenlijk. ik schreef het wat onhandig op. ik bedoel dat het verschil in de breedte gaat zitten en niet in de hoogte. vandaar dat sommige lappen tekst dan verder lopen dan dezelfde lap tekst in een ander font.




heb je fontproef gezien en ben nog aan het bijkomen. dit vat ik dus niet, 25px zou toch 25px moeten zijn.
stel je geeft twee verschillende aannemers de opdracht een huis van 10 meter hoog te bouwen, dan zullen , als het goed is, er toch twee huizen naast elkaar komen te staan die even hoog zijn. maar niet in font-land (kweetniet, fout woord, maar voor deze keer) dus.



  • O ja, deze nog: als een lettertype bestaat uit twee of meer woorden met een spatie, moet dat in de css tussen aanhalingstekens gezet worden.
    Klik om te vergroten...
in het cssbestand wellicht,
maar niet in de style volgens mij, want joomla reageerde wel heer erg raar toen ik dat in de code van een pagina probeerde.

maar hoe dan ook weer bedankt voor tekst en uitleg.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan