Gebruik pasgemaakte lettertipes op webbladsye
Teksinhoud was nog altyd 'n belangrike stuk webwerwe, maar in die vroeë dae van die web was ontwerpers en ontwikkelaars baie beperk in die tipografiese beheer wat hulle oor hul webblaaie gehad het. Dit sluit in 'n beperking in die lettertipes wat hulle op hul webwerwe betroubaar kon gebruik. U het waarskynlik die term "web veilige lettertipes" genoem wat in die verlede genoem is. Dit verwys na die klein stel lettertipes wat hoogs waarskynlik op die rekenaar van 'n persoon ingesluit sou word. Dit beteken dat indien u werf een van daardie lettertipes gebruik, dit 'n veilige weddenskap is dat dit korrek op 'n persoon se blaaier gelewer sal word.
Vandag het webpersoneel 'n leër van nuwe lettertipes en tipe opsies om mee te werk, waarvan een die WOFF-formaat is.
Wat is WOFF?
WOFF is 'n akroniem wat staan vir "Web Open Font Format." Dit word gebruik om lettertipes saam te stel vir gebruik met die CSS @ font-face-eiendom. Dit is 'n manier om lettertipes in webbladsye in te bedek sodat jy gespesialiseerde lettertipes buite die tipiese "Arial, Times New Roman, Georgia" kan gebruik - wat van die voorgenoemde webveilige lettertipes is.
WOFF is aan die W3C voorgelê as 'n standaard vir die verpakking van lettertipes vir webblaaie. Dit het op 16 November 2010 'n werkende konsep geword. Vandag het ons eintlik WOFF 2.0, wat die druk van die eerste weergawe van die formaat met byna 30% verbeter. In sommige gevalle kan hierdie besparings selfs substansiaal wees!
Hoekom gebruik WOFF?
Webfonts, insluitend dié wat via die WOFF-formaat afgelewer word, bied baie voordele bo ander skrifkeuses. Net so bruikbaar as wat webveilige lettertipes was, en daar is beslis nog 'n plek vir daardie lettertipes in ons werk, is dit lekker om ons keuses ook uit te brei en ons tipografiese opsies oop te maak.
WOFF lettertipes het die volgende voordele:
- Hulle is meer toeganklik as lettertipes as beelde. WOFF stel gewone HTML-teks met CSS, wat u toeganklikheid en ontwerpbeheer gee wat beelde nie toelaat nie.
- WOFF lêers sluit tipografiese inligting soos kontekstuele vorms en ou styl figure in. Dit gee jou webbladsye beter tipografie omdat jy die korrekte karakters gebruik, nie net benaderings nie.
- WOFF lettertipes kan help met internasionalisering, want jy kan lettertipes insluit met karakters uit ander tale.
- Soos alle CSS-gestileerde teks, is fonts wat met WOFF gestileer is, meer soekenjinvriendelik. Soekenjins sien nie 'n teks wat in 'n prent ingebed is nie, en terwyl ALT-teks kan help, is daar geen plaasvervanger vir die teks self nie.
- WOFF lettertipes is saamgeperste, dus hulle is kleiner as ander tipes lettertipe lêers. Dit sal help met die aflaai van spoed en algemene prestasie.
- U kan WOFF-lêers gebruik om u handelsmerkidentiteit te behou deur u korporatiewe lettertipes as WOFF-lêers in te sluit.
WOFF Browser Ondersteuning
WOFF het uitstekende blaaierondersteuning in moderne blaaiers, insluitende:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1 +
- Safari 5.1+
Dit word vandag in die algemeen ondersteun, met die enigste uitsondering wat alle weergawes van Opera Mini is.
Hoe om WOFF-lettertipes te gebruik
As u 'n WOFF-lêer wil gebruik, moet u 'n WOFF-lêer op u webbediener oplaai, gee dit 'n naam met die @ font-face-eiendom en skakel dan die font in u CSS. Byvoorbeeld:
- Laai die lettertipe myWoffFont.woff op na die / fonts-gids van die webbediener.
- In u CSS-lêer, voeg 'n @ font-face-afdeling by:
@ font-face {
font-familie: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') formaat ('woff');
}
- Voeg die nuwe fontnaam (myWoffFont) by jou CSS-fontstapel, soos jy enige ander fontnaam sou wou hê:
p {
font-familie: myWoffFont , Genève, Arial, Helvetica, sans-serif;
}
Waar om WOFF-lettertipes te kry
Daar is twee groot plekke wat jy kan vind baie WOFF lettertipes wat vry is vir kommersiële en nie-kommersiële gebruik:
- Open font biblioteek
- Font Eekhoring
As u 'n lisensie het om 'n font te gebruik wat nie in 'n WOFF-formaat beskikbaar is nie, kan u 'n WOFF-skepper gebruik soos by Font Eekhoorn om u skriflêers om te skakel in WOFF-lêers. Daar is ook 'n command line-instrument genaamd sfnt2woff wat jy op Macintosh en Windows kan gebruik om jou TrueType / OpenType-lettertipes na WOFF te omskep.
Laai die binêre by u stelsel af en hardloop dit op die opdraglyn (of Terminal) en volg die instruksies.
WOFF Voorbeeld
Hier is 'n paar voorbeelde van WOFF-lêers: WOFF-bladsy op HTML5 in 24 uur.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 7/11/17