UltKit

TTF, OTF eða WOFF: hvaða letursnið hentar tölvu og vef?

Settu upp TTF eða OTF á tölvunni og notaðu WOFF2 á vefsíðunni. TrueType og OpenType eru tölvusniðin sem öll stýrikerfi lesa; WOFF og WOFF2 eru sömu leturgögnin, þjöppuð til niðurhals, og vafrar kjósa WOFF2 því það er um 30% minna.

Jonas WeberJonas WeberRitstjóri vefafkasta
Uppfært 11 mín. lestur
Hillur og skúffur fullar af gömlum prentstöfum úr tré í ýmsum stærðum og litum
Answer

Hvaða leturgerð ætti ég að nota: TTF, OTF, WOFF eða WOFF2?

Fyrir tölvu skaltu setja upp TTF eða OTF; hvort tveggja virkar á Windows, macOS og Linux. Fyrir vefsíðu skaltu bjóða WOFF2 fyrst og WOFF aðeins til vara. Hráar TTF- eða OTF-skrár á vefsíðu eru 2–3 sinnum þyngri en þær þurfa að vera.

TrueType, OpenType, WOFF og WOFF2 á mannamáli

TrueType er elst þessara fjögurra. Apple sendi það frá sér með System 7 árið 1991 og Microsoft tók það upp í Windows 3.1 árið eftir. TrueType-letur lýsir hverjum staf með annars stigs ferlum, sem hafa einn stjórnpunkt á hvern boga og var ódýrt að teikna á fyrstu vélbúnaði. Það hefur líka vísbendingar (hinting): lítil forrit inni í letrinu sem færa stafleggi og boga að pixlaneti, svo textinn haldist skýr á skjám með lága upplausn. Endingin .ttf merkir enn letur með slíkum annars stigs útlínum.

OpenType, sem Microsoft og Adobe kynntu árið 1996, er umgjörð frekar en ný tegund útlína. Það getur geymt TrueType-útlínur eða PostScript-útlínur í CFF-töflu, sem nota þriðja stigs ferla með tveimur stjórnpunktum á hvern boga. Utan um útlínurnar bætir það við umbrotstöflum fyrir ítarlega leturfræði: venjulega og valfrjálsa samtengistafi, kapítæla, gamaldags tölustafi, stílsett, samhengisháða varastafi og stafabil (kerning). Samkvæmt venju er OpenType-letur byggt á CFF vistað sem .otf, en OpenType-letur með TrueType-útlínum heldur endingunni .ttf.

WOFF og WOFF2 eru umgjarðir smíðaðar fyrir vefinn. WOFF var drög árið 2009 og varð W3C-tilmæli árið 2012; það þjappar hverja leturtöflu með zlib. WOFF2 varð W3C-tilmæli árið 2018, notar Brotli og forvinnur stafagögn fyrst, sem gerir það yfirleitt um 30% minna en WOFF. Þrjú hliðarsnið fullkomna myndina. EOT var sérsnið Internet Explorer fyrir vefinn, SVG-letur var snemmbúin neyðarlausn aðeins fyrir Safari, og breytileg letur (variable fonts), sem bættust við í OpenType 1.8 árið 2016, pakka heilu bili af þykktum eða breiddum í eina skrá.

  1. 1991

    TrueType

    Apple sendir frá sér annars stigs útlínur og vísbendingar með System 7; Windows 3.1 fylgir árið 1992.

  2. 1996

    OpenType

    Microsoft og Adobe kynna eitt ílát fyrir TrueType- eða CFF-útlínur, auk umbrotseiginleika.

  3. 2012

    WOFF 1.0

    Drög árið 2009, verður W3C-tilmæli: sömu töflur, þjappaðar með zlib.

  4. 2016

    Breytileg letur

    OpenType 1.8 gerir einni skrá kleift að geyma samfellda ása fyrir þykkt, breidd eða halla.

  5. 2018

    WOFF2

    W3C-tilmæli sem nota Brotli; yfirleitt um 30% minna en WOFF.

Hvaða letursnið á að setja upp á tölvunni

Settu upp TTF eða OTF og hættu að velta fyrir þér hvort sé betra. Windows 10 og 11 setja hvort tveggja upp með hægri smelli og Install, macOS opnar hvort tveggja í Font Book og Linux-skjáborð finna þau í ~/.local/share/fonts þegar leturskyndiminnið hefur uppfærst. Word, Photoshop, skjáborðsforrit Figma, Affinity og LibreOffice lesa hvort tveggja. Ef hönnuður sendir þér sömu leturfjölskyldu í báðum útgáfum er OTF yfirleitt útgáfan sem leturhönnuðurinn teiknaði, en TTF er umbreyting gerð fyrir eldri hugbúnað.

Tilvikin þar sem munurinn skiptir máli eru fá. Sum skurðarvéla- og útsaumsforrit, leikjavélar og skjásöfn fyrir örstýringar skilja aðeins TrueType-útlínur, þannig að OTF byggt á CFF birtist rangt þar og þarf að umbreyta OTF í TTF. Á hinn bóginn setur ekkert á skjáborði WOFF eða WOFF2 beint upp: þær skrár eru pakkaðar fyrir vafra. Settu aðeins eina útgáfu af leturfjölskyldu upp, því TTF og OTF með sama innra heiti rugla leturvalmyndir og forrit gætu valið rangt.

TrueType Collection.ttc · letursafn · .otc
Ein skrá sem geymir nokkur letur, yfirleitt stíla eða tungumálaafbrigði einnar fjölskyldu, og lætur þau deila eins stafatáknum til að spara pláss. Windows og macOS setja upp öll letur í henni í einu; kerfisletur fyrir CJK eins og Noto Sans CJK eru oft dreifð þannig. Safn byggð á CFF-útlínum nota stundum endinguna .otc í staðinn.
Raðir af málmletri í litlum hólfum í skúffu úr tré fyrir leturkassa
Mynd: Unsplash

Hvaða letursnið á að nota á vefsíðu

Allar núverandi útgáfur af Chrome, Edge, Firefox og Safari lesa WOFF2, þannig að það ætti að vera fyrsta og oft eina uppsprettan í @font-face reglunni þinni. Bættu WOFF línu á eftir aðeins ef greiningargögnin þín sýna enn vafra frá því fyrir um 2016, svo sem gamla Android WebView eða vafra í sjónvörpum. Vafri fer í gegnum src listann í röð og sækir fyrsta sniðið sem hann styður, svo varaleiðin kostar nútímagesti ekkert. Ef þú átt þegar TrueType-skrána fyrir tölvu býr TTF í WOFF til þá varaskrá í einni umferð.

Forðastu að bjóða hráar TTF- eða OTF-skrár á vef nema vettvangur krefjist þess, eins og sum póstsmíðatól og eldri efniskerfi gera. Vafrar birta þær vel, en skrárnar berast óþjappaðar nema þjónninn gzip-þjappi letur, og þær færa hverjum sem er tilbúið skjáborðseintak til uppsetningar. Línan font-display: swap hér að neðan segir vafranum að sýna texta strax í varaletri og skipta yfir í letrið þitt þegar það berst, í stað þess að fela texta í allt að 3 sekúndur á meðan beðið er.

Hýstu skrárnar á þínu eigin léni þegar það er hægt. Chrome, Safari og Firefox skipta nú skyndiminni eftir vefsvæðum, þannig að letur sótt af sameiginlegu CDN er ekki lengur endurnýtt milli vefja, og eigin hýsing sparar DNS-uppflettingu og tengingu. Bættu við <link rel="preload"> aðeins fyrir eina eða tvær þykktir sem notaðar eru ofan við brotið; ef allir stílar eru forhlaðnir keppa þeir við myndirnar um bandvídd.

@font-face með WOFF2 fyrst, WOFF til vara og swap
@font-face {
  font-family: "Source Serif";
  src: url("/fonts/source-serif-regular.woff2") format("woff2"),
       url("/fonts/source-serif-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201E, U+20AC;
}

Algengar skráarstærðir leturs og hvers vegna hlutmengun skiptir máli

Ein þykkt af latnesku letri vistuð sem WOFF2 vegur yfirleitt 20–60 KB. Sama letur sem óþjappað TTF er oft tvöfalt til þrefalt stærra, og fjölskylda sem nær einnig yfir grísku, kyrillísku og víetnömsku getur farið yfir 200 KB á hvern stíl. Kínversk, japönsk og kóresk letur eru allt annar skali: heil CJK-þykkt geymir tugi þúsunda stafatákna og er yfirleitt nokkur megabæti jafnvel eftir WOFF2-þjöppun, sem er allt of mikið til að hlaða áður en síða getur sýnt textann.

Undirmengjun fjarlægir þau tákn sem síða notar aldrei, og unicode-range segir vafranum hvaða tákn skrá nær yfir, svo hann sæki hana aðeins þegar síðan inniheldur þau. Google Fonts notar einmitt þetta fyrir CJK og sker hverja fjölskyldu í margar litlar sneiðar sem hlaðast eftir þörfum. Fyrir þín eigin letur sker valkosturinn Halda stöfum í leturbreytinum skrána niður í Latin + accents eða Aðeins tákn sem ég skrifa áður en hún berst til þjónsins; haltu Öll tákn fyrir allt sem þú setur upp á tölvu.

Dæmigerð latnesk textaþykkt sem WOFF2
20–60 KB
Dæmigerður sparnaður WOFF2 miðað við WOFF
≈ 30%
Dæmigerð heil CJK-þykkt, jafnvel sem WOFF2
Nokkur MB

Umbreyting milli sniða og hvað fer úrskeiðis

TTF í OTF og til baka er ílátsskipti fyrir letur af TrueType-gerð: útlínutaflan, málin og umbrotseiginleikarnir flytjast óbreytt. Áhugaverða tilvikið er OTF byggt á CFF sem fer í TTF. Þriðja stigs ferlar verða ekki afritaðir beint í annars stigs útlínusnið, svo hver ferill er teiknaður upp aftur sem einn eða fleiri annars stigs bútar með skekkju langt undir einum pixli. PostScript-vísbendingar verða heldur ekki þýddar, og þess vegna býður OTF-í-TTF tólið Hinting sem Keep, Remove eða Sjálfvirkar vísbendingar.

Algengasta umbreytingin er af vefnum aftur á skjáborðið. Þú sækir þema eða hönnunarpakka, finnur aðeins .woff eða .woff2 skrár og þarft letrið í Word eða Figma. WOFF í TTF fjarlægir þjöppunina og skrifar upprunalegu töflurnar aftur út, svo stafatákn, stafabil og eiginleikar koma eins út og fóru inn. Það sem ekki fæst til baka er allt sem vefútgáfan hafði þegar misst, svo sem tákn fjarlægð með undirmengjun eða vísbendingar sem voru fjarlægðar til að spara bæti.

Flest vandamál við umbreytingu eiga rætur að rekja til þriggja atriða: vísbendinga, umbrotseiginleika og breytilegra ása. Listinn hér að neðan nær yfir einkennin sem þú tekur líklega eftir eftir umbreytingu og venjulega orsök hvers þeirra.

  • Lítill texti er óskýr eða ójafn á Windows eftir umbreytingu

    Upprunalegu vísbendingarnar voru fjarlægðar eða fylgdu ekki með. Umbreyttu aftur með Hinting stillt á Sjálfvirkar vísbendingar; á Retina-skjám og símum sést munurinn sjaldan.

  • Samtengistafir, kapítælar eða stílsett hættu að virka

    Forritið sýnir kannski ekki OpenType-eiginleika, eða undirmengjun fjarlægði varastafina sem eiginleikarnir vísa í. Umbreyttu upprunalegu skránni með Öll tákn og athugaðu hvort forritið hafi leturfræði- eða OpenType-spjald.

  • Breytilegt letur sýnir nú aðeins eina þykkt

    Sum tól fletja breytilegt letur í eitt kyrrstætt eintak. Haltu breytilegu upprunaskránni og athugaðu hvort niðurstaðan sýni ásalista áður en þú eyðir upprunalegu skránni.

  • Umbreytta letrið birtist tvisvar í leturvalmyndinni

    Báðar útgáfurnar deila sama innra fjölskylduheiti. Fjarlægðu gömlu skrána, eða settu nýtt Heiti leturfjölskyldu undir Ítarlegar stillingar áður en þú umbreytir.

Að athuga letur áður en þú notar það eða umbreytir því

Leturskrá er lítill gagnagrunnur og þrír hlutar hennar svara flestum spurningum. name taflan geymir heiti fjölskyldu, stílheiti, útgáfu, höfundarréttarlínu og oft slóð á leyfi; Font Book í macOS sýnir hana í upplýsingasýn og forskoðun leturs í Windows sýnir fyrstu línurnar. Stafaþekja segir þér hvaða tungumál letrið getur sett: letur eingöngu með latneskum stöfum fellur þegjandi yfir í annað letur fyrir pólsk, tyrknesk eða víetnömsk tákn sem vantar. Fyrir breytilegt letur telur fvar taflan upp ásana, svo sem þykkt frá 100 til 900 eða breidd frá 75 til 125.

Leyfismál er vert að skoða áður en nokkuð fer á netið. Auglýst leturhús selja oft sérstök leyfi fyrir skjáborð, vef og forrit, og skjáborðsleyfi nær yfirleitt til uppsetningar á tilteknum fjölda tölva en ekki til þess að bjóða skrána vefgestum eða pakka henni í farsímaforrit. Umbreyting breytir skráarsniði leturs en aldrei leyfi þess, svo WOFF2 gert úr TTF fyrir skjáborð ber sömu skilmála og TTF-skráin. Letur með SIL Open Font License, sem nær yfir flest Google Fonts, má umbreyta, undirmengja og hýsa sjálfur.

  • Heiti fjölskyldu og stíls eru rétt í name töflunni
  • Útgáfunúmerið passar við þá útgáfu sem þú ætlaðir að nota
  • Öll tungumál sem textinn notar hafa sína broddstafi og sértákn
  • Breytilegt letur telur enn upp þykktar- eða breiddarása sína
  • Leyfið nær yfir notkunina: skjáborð, vef, forrit eða innfellingu í skjöl

Ákvörðunartafla: rétta letursniðið fyrir hvert verk

Flestar spurningar um letur snúast um hvar skráin á að vera. Ef hún er sett upp á tölvu eða pakkað í forrit skaltu nota TrueType eða OpenType; ef vafri sækir hana skaltu nota þjöppuðu vefumgjarðirnar. Taflan tengir algeng verkefni við sniðið sem á að velja og umbreytinguna sem kemur þér þangað, svo þú getir sleppt sögunni og farið beint í skrána sem þú þarft.

Tvö verkefni falla milli flokka. EPUB 3 tekur við TTF, OTF og WOFF, svo rafbækur geta notað hvora fjölskyldu sniða sem er, og SVG-leturskrár tilheyra sömu ætt og vektormyndir en skipta í dag aðallega máli fyrir sum teikni- og leturgröftunarforrit frekar en vafra.

Hvaða leturgerð á að velja eftir verkefni
VerkefniSnið til að notaEf þú átt aðeinsUmbreyta
Setja upp á Windows, macOS eða LinuxTTF eða OTFWOFF eða WOFF2WOFF → TTF
Hugbúnaður sem hafnar OTF-skránni þinniTTFOTF byggt á CFFOTF → TTF
Sjálfhýst vefleturWOFF2TTF eða OTFTTF → WOFF2
Varaleið fyrir mjög gamla vafraWOFFTTFTTF → WOFF
Kínverskur, japanskur eða kóreskur vefurUndirmengjaðar WOFF2-sneiðarFullt TTF eða OTFUndirmengja, svo WOFF2
Nokkrar þykktir í einni skráBreytilegt TTF eða WOFF2Breytilegt TTFHalda ásum við umbreytingu
Rafbók (EPUB 3)TTF, OTF eða WOFFWOFF2WOFF2 → TTF

Helstu atriði

  • Settu upp TTF eða OTF á tölvu; hvort tveggja virkar á Windows, macOS og Linux.
  • Bjóddu WOFF2 fyrst á vefsíðu, bættu WOFF aðeins við fyrir mjög gamla vafra og stilltu font-display: swap.
  • WOFF og WOFF2 eru þjappaðar umgjarðir, svo umbreyting í þær breytir niðurhalsstærðinni, ekki stöfunum.
  • Undirmengdu eftir letri og unicode-range; það skiptir mestu máli fyrir CJK-letur sem eru nokkur megabæti.
  • Umbreyting breytir skráarsniði, aldrei leyfi, og getur misst vísbendingar eða breytilega ása ef ekki er farið varlega.
DeilaXFacebookWhatsAppTelegram

Algengar spurningar

Eru gæðin meiri í OTF en TTF?

Ekki á neinn hátt sem sést í venjulegum stærðum. Þriðja og annars stigs ferlar geta lýst sömu stafalögun og bæði snið bera sömu OpenType-eiginleika. OTF-skrár eru oft upprunaleg teikning hönnuðarins, sem er eina raunhæfa ástæðan til að kjósa þær.

Hvers vegna kemur niðurhalað letur sem ZIP-skrá með TTF, WOFF og WOFF2?

Seljandinn gefur þér eina skrá fyrir hvert verkefni. Settu TTF upp á tölvunni þinni og hladdu WOFF2 upp á vefsíðuna, auk WOFF ef þú vilt varaleið.

Virkar WOFF2 í tölvupósti?

Aðeins að hluta. Apple Mail og iOS Mail hlaða vefletri úr tengdu stílblaði, en Gmail og Outlook á Windows hunsa sérletur og sýna varaletrið, svo endaðu alltaf font-family listann á öruggu kerfisletri.

Get ég notað TTC-skrá á vefsíðu?

Ekki beint. Vafrar búast við einu letri í hverri skrá, svo dragðu einstök letur út úr safninu og umbreyttu hverju í WOFF2.

Koma breytileg letur í stað aðskildra skráa fyrir hverja þykkt?

Oft, já. Breytilegt WOFF2 sem nær yfir þykktir 100 til 900 er yfirleitt minna en fjórar eða fleiri kyrrstæðar þykktir samanlagt, og allir núverandi vafrar styðja það. Ef þú notar aðeins eina eða tvær þykktir geta kyrrstæðar skrár samt verið léttari.

Borgar sig enn að búa til EOT- og SVG-letur?

Sjaldan. EOT skiptir aðeins máli fyrir Internet Explorer 8 og eldri, og SVG-letur eru hunsuð af núverandi Chrome og Firefox, svo þau eru aðeins þess virði fyrir gömul kerfi eða hugbúnað sem les þau.

Lestu meira