[CSS] @font-face vraagje (grootte van lettertypes)

[Verwijderd]

Hi,

Ik gebruik @font-face om een op de server beschikbaar lettertype aan te bieden aan de bezoeker (die een capabele browser gebruikt uiteraard). Via font-family wordt netjes een alternatief geboden indien de bezoeker met een incapabele browser een bezoek brengt.

Het probleem is nu dat het verschil in grootte tussen mijn OTF lettertype en een web-safe alternatief (in dit geval Gotham, Arial) nogal aanzienlijk is. Om met mijn OTF lettertype een nette h1 te stylen moet ik naar font-size: 30px, terwijl de Arial op 30px giga wordt.

Is er een handige manier om afhankelijk van het gebruikte lettertype een grootte op te geven? Als ik dit namelijk doe in @font-face, dan werkt dat volgens mij door over de gehele stylesheet.

Thx!

[MoietyMe]

Die is er wel, maar ik kan even niet op de naam van de declaratie komen

[Bosmonster]

font-size-adjust toevallig?

Dat is alleen volgens mij niet xbrowser dus werkt niet per definitie op browsers die font-embedding ondersteunen.

[ Voor 68% gewijzigd door Bosmonster op 08-12-2010 13:14 ]

[Verwijderd]

Ik ga even google'en daarop. thx

[MoietyMe]

Bosmonster schreef op woensdag 08 december 2010 @ 13:13:
font-size-adjust toevallig?

Dat is alleen volgens mij niet xbrowser dus werkt niet per definitie op browsers die font-embedding ondersteunen.

Die bedoelde ik inderdaad.

Volgens Comparison of layout engines (Cascading Style Sheets) wordt dat alleen ondersteund door Gecko.

Hier nog een mooie uitleg / tutorial: The Little Known font-size-adjust CSS3 Property.

[ Voor 15% gewijzigd door MoietyMe op 08-12-2010 14:47 ]

[Bosmonster]

Ik weet niet wat webkit's -webkit-text-size-adjust doet?

[MoietyMe]

Bosmonster schreef op woensdag 08 december 2010 @ 16:59:
Ik weet niet wat webkit's -webkit-text-size-adjust doet?

Dat is voor de iPhone. Kun je mee bepalen hoe veel de tekst scaled.

Iets meer info: CSS Property : -webkit-text-size-adjust

[ Voor 20% gewijzigd door MoietyMe op 08-12-2010 17:10 . Reden: URL met meer informatie toegevoegd. ]

[ikbenmelle]

Er zijn twee mogelijkheden om dit probleem op te lossen:

1) CSS - Jonathan Snook (Becoming a Font Embedding Master) heeft een oplossing waardoor je font-face ook in Internet Explorer (in ieder geval) 6 tot 8. Internet Explorer 9 heeft native ondersteuning.

2) Modernizr (JavaScript ±4kb) - detecteert of een CSS3 property wordt ondersteund en als dit niet het geval is, geeft het een HTML element een extra class waardoor je het zo kunt stijlen dat het er toch nog redelijk uitziet. Prettig is dat Modernizr open source is en niet conflicteert met andere JavaScript libraries.

Dit zou je probleem moeten oplossen.

~m

[Bosmonster]

Anders lees je eerst het probleem even voor je komt met een "oplossing"

[Tjeemp]

Is wel een oplossing voor het cross-browser probleem (neem ik aan). Misschien bedoelde noonnoo dat.

[Bosmonster]

Volgens mij ging het om de grootte van fonts. Crossbrowser is helemaal geen probleem. IE ondersteunt al font-embedding sinds versie 5 ofzo.

[Verwijderd]

Via de @font-face generator heb je niet eens meer een back-up font nodig. Ik gebruik het sinds kort en vind het verreweg de beste methode om 'custom' fonts in te laden. En ook volledig cross-browser.

http://www.fontsquirrel.com/fontface/generator

[Bosmonster]

Een backup font heb je altijd nodig. Firefox ondersteunt bijvoorbeeld pas font embedding sinds versie 3.5.

Daarnaast krijg je soms last van een verspringing van het font zodra het geladen is, dat verschil wil je natuurlijk zoveel mogelijk beperken.

[posttoast]

Hoe zit het met dat SVG-formaat eigenlijk? In dit artikel wordt verteld dat je hiermee ook Chrome en Safari op iOS kunt ondersteunen, maar die werken hier prima met TTF.

[MoietyMe]

Bosmonster schreef op maandag 13 december 2010 @ 11:01:
Volgens mij ging het om de grootte van fonts. Crossbrowser is helemaal geen probleem. IE ondersteunt al font-embedding sinds versie 5 ofzo.

Versie 4 al

bron

[Bosmonster]

posttoast schreef op donderdag 16 december 2010 @ 08:56:
Hoe zit het met dat SVG-formaat eigenlijk? In dit artikel wordt verteld dat je hiermee ook Chrome en Safari op iOS kunt ondersteunen, maar die werken hier prima met TTF.

iOS 4.2 heeft TTF support toegevoegd aan Safari op iOS.

[posttoast]

Bosmonster schreef op donderdag 16 december 2010 @ 10:05:
[...]


iOS 4.2 heeft TTF support toegevoegd aan Safari op iOS.

Ah, OK. En Chrome heeft dat tegenwoordig blijkbaar ook. Dus dan is die SVG-toevoeging alleen nog voor Opera relevant? (en voor oudere iOS versies natuurlijk waarvan er best nog wat in gebruik zullen zijn)

[ Voor 12% gewijzigd door posttoast op 16-12-2010 10:29 ]