UltKit

TTF vs OTF vs WOFF: Format Fon untuk Pasang atau Web

Pasang TTF atau OTF pada komputer anda, dan gunakan WOFF2 pada laman web anda. TrueType dan OpenType ialah format desktop yang dibaca oleh setiap sistem pengendalian; WOFF dan WOFF2 ialah data fon yang sama tetapi dimampatkan untuk dimuat turun, dan pelayar mengutamakan WOFF2 kerana saiznya kira-kira 30% lebih kecil.

Jonas WeberJonas WeberEditor prestasi web
Dikemas kini 11 min bacaan
Rak dan laci yang penuh dengan blok huruf cetak letterpress kayu lama pelbagai saiz dan warna
Answer

Format fon mana yang patut saya gunakan: TTF, OTF, WOFF atau WOFF2?

Untuk komputer, pasang TTF atau OTF; kedua-duanya berfungsi pada Windows, macOS dan Linux. Untuk laman web, sediakan WOFF2 dahulu dan WOFF hanya sebagai sandaran. Fail TTF atau OTF mentah pada halaman web 2–3 kali lebih berat daripada yang perlu.

TrueType, OpenType, WOFF dan WOFF2 secara ringkas

TrueType ialah yang paling lama daripada empat format ini. Apple melancarkannya bersama System 7 pada 1991 dan Microsoft menggunakannya untuk Windows 3.1 pada tahun berikutnya. Fon TrueType menerangkan setiap huruf dengan lengkung kuadratik, yang mempunyai satu titik kawalan bagi setiap segmen lengkung dan murah untuk dilukis pada perkakasan awal. Ia juga membawa hinting: atur cara kecil dalam fon yang menyelaraskan batang dan lengkung pada grid piksel, supaya teks kekal tajam pada skrin beresolusi rendah. Sambungan .ttf masih menandakan fon dengan kontur kuadratik ini.

OpenType, diumumkan oleh Microsoft dan Adobe pada 1996, ialah pembungkus dan bukan jenis kontur baharu. Ia boleh menyimpan kontur TrueType atau kontur PostScript yang disimpan dalam jadual CFF, yang menggunakan lengkung kubik dengan dua titik kawalan bagi setiap segmen. Di sekeliling kontur itu, ia menambah jadual reka letak untuk tipografi lanjutan: ligatur piawai dan pilihan, huruf besar kecil, angka gaya lama, set gaya, alternatif kontekstual dan kerning. Mengikut konvensyen, fon OpenType berasaskan CFF disimpan sebagai .otf, manakala fon OpenType dengan kontur TrueType kekal menggunakan sambungan .ttf.

WOFF dan WOFF2 ialah pembungkus yang dibina untuk web. WOFF dirangka pada 2009 dan menjadi Syor W3C pada 2012; ia memampatkan setiap jadual fon dengan zlib. WOFF2 menjadi Syor W3C pada 2018, beralih kepada Brotli dan memproses data glif terlebih dahulu, lalu lazimnya sekitar 30% lebih kecil daripada WOFF. Tiga format sampingan melengkapkan gambaran ini. EOT ialah format web milik Internet Explorer, fon SVG ialah penyelesaian sementara awal yang hanya untuk Safari, dan fon boleh ubah, yang ditambah dalam OpenType 1.8 pada 2016, memuatkan pelbagai ketebalan atau lebar dalam satu fail.

  1. 1991

    TrueType

    Apple melancarkan kontur kuadratik dan hinting bersama System 7; Windows 3.1 menyusul pada 1992.

  2. 1996

    OpenType

    Microsoft dan Adobe mengumumkan satu bekas untuk kontur TrueType atau CFF, serta ciri reka letak.

  3. 2012

    WOFF 1.0

    Dirangka pada 2009, ia menjadi Syor W3C: jadual yang sama, dimampatkan dengan zlib.

  4. 2016

    Fon boleh ubah

    OpenType 1.8 membolehkan satu fail menyimpan paksi ketebalan, lebar atau condong yang selanjar.

  5. 2018

    WOFF2

    Syor W3C menggunakan Brotli; lazimnya sekitar 30% lebih kecil daripada WOFF.

Format fon yang patut dipasang pada komputer anda

Pasang TTF atau OTF dan tidak perlu risau yang mana satu. Windows 10 dan 11 memasang kedua-duanya dengan klik kanan dan Install, macOS membuka kedua-duanya dalam Font Book, dan desktop Linux mengesannya daripada ~/.local/share/fonts selepas cache fon dimuat semula. Word, Photoshop, aplikasi desktop Figma, Affinity dan LibreOffice semuanya boleh membaca kedua-duanya. Jika pereka menghantar keluarga fon yang sama dalam kedua-dua versi, OTF biasanya versi asal lukisan pereka fon, manakala TTF ialah penukaran untuk perisian lama.

Kes yang perbezaannya penting adalah sempit. Sesetengah atur cara mesin pemotong dan sulaman, enjin permainan dan pustaka paparan mikropengawal hanya memahami kontur TrueType, jadi OTF berasaskan CFF kelihatan rosak di situ dan perlu menukar OTF ke TTF. Sebaliknya, tiada apa pada desktop yang memasang WOFF atau WOFF2 secara terus: fail itu dibungkus untuk pelayar. Pasang hanya satu versi bagi sesebuah keluarga, kerana TTF dan OTF dengan nama dalaman yang sama mengelirukan menu fon dan aplikasi mungkin memilih yang salah.

TrueType Collection.ttc · koleksi fon · .otc
Satu fail yang menyimpan beberapa fon, biasanya gaya atau varian bahasa bagi satu keluarga, dan membolehkannya berkongsi glif yang serupa untuk menjimatkan ruang. Windows dan macOS memasang setiap fon di dalamnya sekali gus; keluarga CJK sistem seperti Noto Sans CJK sering diedarkan dengan cara ini. Koleksi yang dibina atas kontur CFF kadangkala menggunakan sambungan .otc.
Barisan huruf cetak logam disusun dalam petak kecil laci kotak huruf kayu
Foto: Unsplash

Format fon yang patut digunakan pada laman web

Setiap versi semasa Chrome, Edge, Firefox dan Safari membaca WOFF2, jadi ia patut menjadi sumber pertama dan sering satu-satunya dalam peraturan @font-face anda. Tambah baris WOFF selepasnya hanya jika analitik anda masih menunjukkan pelayar sebelum sekitar 2016, seperti WebView Android lama atau pelayar TV terbenam. Pelayar menyemak senarai src mengikut turutan dan memuat turun format pertama yang disokongnya, jadi sandaran itu tidak membebankan pelawat moden. Jika anda sudah ada fail TrueType desktop, TTF ke WOFF menghasilkan sandaran itu sekali jalan.

Elakkan menyediakan TTF atau OTF mentah pada laman kecuali platform memaksa anda, seperti sesetengah pembina e-mel dan sistem kandungan lama. Pelayar memaparkannya dengan baik, tetapi fail dihantar tanpa mampatan melainkan pelayan anda menggzip fon, dan ia memberi sesiapa sahaja salinan desktop yang sedia dipasang. Baris font-display: swap di bawah menyuruh pelayar memaparkan teks dengan fon sandaran serta-merta dan menukar kepada fon anda apabila ia tiba, dan bukannya menyembunyikan teks sehingga 3 saat sambil menunggu.

Hos fail pada domain anda sendiri jika boleh. Chrome, Safari dan Firefox kini mengasingkan cache mengikut laman, jadi fon yang diambil daripada CDN kongsi tidak lagi digunakan semula merentas laman web, dan hos sendiri menjimatkan satu carian DNS dan sambungan. Tambah <link rel="preload"> hanya untuk satu atau dua ketebalan yang digunakan di bahagian atas halaman; pramuat setiap gaya akan bersaing dengan gambar anda untuk lebar jalur.

@font-face dengan WOFF2 dahulu, sandaran WOFF dan 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;
}

Saiz fail fon biasa, dan mengapa subsetting penting

Satu ketebalan teks Latin yang disimpan sebagai WOFF2 lazimnya berat 20–60 KB. Fon yang sama sebagai TTF tanpa mampatan sering dua hingga tiga kali ganda lebih besar, dan keluarga yang turut merangkumi Yunani, Cyrillic dan Vietnam boleh melebihi 200 KB bagi setiap gaya. Fon Cina, Jepun dan Korea berada pada skala yang lain sama sekali: satu ketebalan CJK penuh memuatkan puluhan ribu glif dan biasanya mencecah beberapa megabait walaupun selepas mampatan WOFF2, yang terlalu besar untuk dimuatkan sebelum halaman dapat memaparkan teksnya.

Subset membuang aksara yang tidak pernah digunakan oleh halaman, dan unicode-range memberitahu pelayar aksara yang dirangkumi sesuatu fail, supaya fail itu dimuat turun hanya apabila halaman benar-benar mengandunginya. Google Fonts menggunakan cara ini untuk CJK, memotong setiap keluarga kepada banyak kepingan kecil yang dimuatkan apabila diperlukan. Untuk fon anda sendiri, pilihan Kekalkan aksara dalam penukar fon memangkas fail kepada Latin + accents atau Hanya aksara yang saya taip sebelum ia sampai ke pelayan anda; kekalkan Semua aksara untuk apa-apa yang anda pasang pada komputer.

Ketebalan teks Latin lazim sebagai WOFF2
20–60 KB
Penjimatan WOFF2 lazim berbanding WOFF
≈ 30%
Ketebalan CJK penuh lazim, walaupun sebagai WOFF2
Beberapa MB

Menukar antara format fon, dan apa yang boleh rosak

TTF ke OTF dan sebaliknya ialah perubahan bekas bagi fon berperisa TrueType: jadual kontur, metrik dan ciri reka letak berpindah tanpa diubah. Kes yang menarik ialah OTF berasaskan CFF ditukar ke TTF. Lengkung kubik tidak boleh disalin ke format kontur kuadratik, jadi setiap lengkung dilukis semula sebagai satu atau lebih segmen kuadratik dalam toleransi yang jauh lebih kecil daripada sepiksel. Hint PostScript juga tidak boleh diterjemahkan, itulah sebabnya alat OTF ke TTF menawarkan Hinting sebagai Keep, Remove atau Auto-hint.

Beralih daripada web kembali ke desktop ialah penukaran yang paling biasa. Anda memuat turun tema atau kit reka bentuk, hanya menemui fail .woff atau .woff2, dan memerlukan fon itu dalam Word atau Figma. WOFF ke TTF membuang mampatan dan menulis semula jadual asal, jadi glif, kerning dan ciri keluar sama seperti ketika masuk. Yang tidak boleh dipulihkan ialah apa-apa yang sudah digugurkan oleh versi web, seperti aksara yang dibuang melalui subset atau hint yang dibuang untuk menjimatkan bait.

Kebanyakan masalah penukaran berpunca daripada tiga perkara: hinting, ciri reka letak dan paksi boleh ubah. Senarai di bawah merangkumi gejala yang mungkin anda perasan selepas menukar dan punca biasa bagi setiap satu.

  • Teks kecil kelihatan kabur atau tidak sekata pada Windows selepas penukaran

    Hint asal telah dibuang atau tidak dapat dibawa bersama. Tukar semula dengan Hinting ditetapkan kepada Auto-hint; pada skrin Retina dan telefon, perbezaannya jarang kelihatan.

  • Ligatur, huruf besar kecil atau set gaya berhenti berfungsi

    Aplikasi mungkin tidak mendedahkan ciri OpenType, atau langkah subset menggugurkan glif alternatif yang dirujuk oleh ciri itu. Tukar fail asal dengan Semua aksara dan semak sama ada aplikasi anda mempunyai panel tipografi atau OpenType.

  • Fon boleh ubah kini hanya menunjukkan satu ketebalan

    Sesetengah alat meratakan fon boleh ubah kepada satu instans statik. Simpan sumber boleh ubah itu, dan semak senarai paksi pada hasilnya sebelum memadam fail asal.

  • Fon yang ditukar muncul dua kali dalam menu fon

    Kedua-dua versi berkongsi nama keluarga dalaman yang sama. Nyahpasang fail lama, atau tetapkan Nama keluarga baharu di bawah Tetapan lanjutan sebelum menukar.

Menyemak fon sebelum anda menggunakan atau menukarnya

Fail fon ialah pangkalan data kecil, dan tiga bahagiannya menjawab kebanyakan soalan. Jadual name menyimpan nama keluarga, nama gaya, versi, baris hak cipta dan sering URL lesen; Font Book macOS menunjukkannya dalam paparan maklumat, dan pratonton fon Windows menunjukkan beberapa baris pertama. Liputan glif memberitahu bahasa yang boleh disetkan oleh fon: fon Latin sahaja secara senyap beralih ke jenis huruf lain bagi aksara Poland, Turki atau Vietnam yang tiada padanya. Bagi fon boleh ubah, jadual fvar menyenaraikan paksinya, seperti ketebalan dari 100 hingga 900 atau lebar dari 75 hingga 125.

Pelesenan wajar disemak sekali sebelum apa-apa dimuat naik ke dalam talian. Pengilang fon komersial sering menjual lesen desktop, web dan aplikasi secara berasingan, dan lesen desktop biasanya meliputi pemasangan pada bilangan komputer tertentu tetapi bukan menyajikan fail kepada pengunjung laman web atau memasukkannya dalam aplikasi mudah alih. Menukar fon mengubah format failnya, tidak pernah lesennya, jadi WOFF2 yang dibuat daripada TTF desktop membawa syarat yang sama seperti TTF itu. Fon di bawah SIL Open Font License, yang meliputi kebanyakan Google Fonts, boleh ditukar, disubset dan dihos sendiri.

  • Nama keluarga dan gaya tertera dengan betul dalam jadual name
  • Nombor versi sepadan dengan keluaran yang anda maksudkan
  • Setiap bahasa yang digunakan teks anda mempunyai aksara beraksen dan khasnya
  • Fon boleh ubah masih menyenaraikan paksi ketebalan atau lebarnya
  • Lesen meliputi penggunaan itu: desktop, laman web, aplikasi atau pembenaman dalam dokumen

Jadual keputusan: format fon yang sesuai untuk setiap tugas

Kebanyakan soalan tentang fon bergantung pada di mana fail itu akan berada. Jika dipasang pada komputer atau dibungkus dalam aplikasi, gunakan TrueType atau OpenType; jika pelayar memuat turunnya, gunakan pembungkus web termampat. Jadual memadankan tugas biasa dengan format yang dipilih dan penukaran yang membawa anda ke situ, jadi anda boleh melangkau sejarah dan terus ke fail yang diperlukan.

Dua tugas berada di antara kategori. EPUB 3 menerima TTF, OTF dan WOFF, jadi e-buku boleh menggunakan mana-mana keluarga format, dan fail fon SVG berasal daripada keturunan yang sama dengan grafik vektor tetapi kini penting terutamanya untuk sesetengah perisian pemplot dan ukiran, bukan untuk pelayar.

Format fon yang dipilih, mengikut tugas
TugasFormat yang digunakanJika anda hanya adaTukar
Pasang pada Windows, macOS atau LinuxTTF atau OTFWOFF atau WOFF2WOFF → TTF
Perisian yang menolak OTF andaTTFOTF berasaskan CFFOTF → TTF
Fon laman web dihos sendiriWOFF2TTF atau OTFTTF → WOFF2
Sandaran untuk pelayar yang sangat lamaWOFFTTFTTF → WOFF
Laman Cina, Jepun atau KoreaKepingan WOFF2 yang disubsetTTF atau OTF penuhSubset, kemudian WOFF2
Beberapa ketebalan dalam satu failTTF atau WOFF2 boleh ubahTTF boleh ubahKekalkan paksi semasa menukar
E-buku (EPUB 3)TTF, OTF atau WOFFWOFF2WOFF2 → TTF

Perkara penting

  • Pasang TTF atau OTF pada komputer; kedua-duanya berfungsi pada Windows, macOS dan Linux.
  • Sediakan WOFF2 dahulu pada laman web, tambah WOFF hanya untuk pelayar yang sangat lama, dan tetapkan font-display: swap.
  • WOFF dan WOFF2 ialah pembungkus termampat, jadi menukar kepadanya mengubah saiz muat turun, bukan hurufnya.
  • Buat subset mengikut skrip dan unicode-range; ia paling penting untuk fon CJK yang mencecah beberapa megabait.
  • Penukaran mengubah format fail, tidak pernah lesen, dan boleh menggugurkan hinting atau paksi boleh ubah jika tidak berhati-hati.
KongsiXFacebookWhatsAppTelegram

Soalan lazim

Adakah kualiti OTF lebih baik daripada TTF?

Tidak dengan cara yang boleh dilihat pada saiz biasa. Lengkung kubik dan kuadratik boleh menerangkan bentuk huruf yang sama, dan kedua-dua format membawa ciri OpenType yang sama. Fail OTF sering lukisan asal pereka, yang merupakan satu-satunya sebab praktikal untuk memilihnya.

Mengapa fon yang dimuat turun datang dalam ZIP berisi TTF, WOFF dan WOFF2?

Vendor memberi anda satu fail bagi setiap tugas. Pasang TTF pada komputer anda dan muat naik WOFF2, serta WOFF jika mahukan sandaran, ke laman web anda.

Adakah WOFF2 berfungsi dalam e-mel?

Hanya sebahagian. Apple Mail dan iOS Mail memuatkan fon web daripada helaian gaya yang dipautkan, manakala Gmail dan Outlook pada Windows mengabaikan fon tersuai dan menunjukkan sandaran, jadi sentiasa akhiri senarai font-family anda dengan fon sistem yang selamat.

Bolehkah saya menggunakan fail TTC pada laman web?

Tidak secara terus. Pelayar menjangkakan satu fon bagi setiap fail, jadi ekstrak fon individu daripada koleksi dan tukar setiap satu ke WOFF2.

Adakah fon boleh ubah (variable font) menggantikan fail ketebalan yang berasingan?

Selalunya ya. WOFF2 boleh ubah yang meliputi ketebalan 100 hingga 900 biasanya lebih kecil daripada empat atau lebih ketebalan statik digabungkan, dan setiap pelayar semasa menyokongnya. Jika anda hanya menggunakan satu atau dua ketebalan, fail statik mungkin masih lebih ringan.

Adakah fon EOT dan SVG masih berbaloi dijana?

Jarang. EOT hanya penting untuk Internet Explorer 8 dan lebih lama, dan fon SVG diabaikan oleh Chrome dan Firefox semasa, jadi ia hanya berbaloi dibuat untuk sistem lama atau perisian yang membacanya.

Teruskan membaca