Menggunakan Font Custom pada Halaman Web
Kandungan teks selalu menjadi bahagian penting laman web, tetapi pada masa awal Web, pereka dan pemaju sangat terhad dalam kawalan tipografi yang mereka miliki di laman web mereka. Ini termasuk batasan dalam fon bahawa mereka dapat digunakan dengan reliably di laman web mereka. Anda mungkin pernah mendengar istilah "fon selamat web" yang disebut di masa lalu. Ini merujuk kepada set kecil fon yang sangat mungkin dimasukkan ke dalam komputer seseorang, yang bermaksud bahawa jika laman web anda menggunakan salah satu fon, itu adalah pertaruhan yang selamat yang akan diberikan dengan benar pada penyemak imbas seseorang.
Hari ini, profesional web mempunyai pelbagai fon baru dan jenis pilihan untuk bekerja dengan, salah satunya adalah format WOFF.
Apa itu WOFF?
WOFF adalah akronim yang bermaksud "Format Font Terbuka Web." Ia digunakan untuk memampatkan fon untuk digunakan dengan CSS @ font-face property. Ini adalah cara untuk membenamkan fon di laman web supaya anda boleh menggunakan fon khusus di luar "Arial, Times New Roman, Georgia" biasa - yang merupakan beberapa fon selamat web yang disebutkan di atas.
WOFF telah diserahkan kepada W3C sebagai standard untuk fon pembungkusan untuk laman web. Ia menjadi draf kerja pada 16 November 2010. Hari ini kita sebenarnya mempunyai WOFF 2.0, yang meningkatkan pemampatan dari versi pertama format hampir 30%. Dalam sesetengah kes, penjimatan ini boleh menjadi lebih besar!
Mengapa menggunakan WOFF?
Fon web, termasuk yang dihantar melalui format WOFF, memberikan banyak kelebihan terhadap pilihan font lain. Sebagaimana yang digunakan sebagai fon selamat web, dan masih terdapat tempat bagi fon yang terdapat di dalam kerja kami, adalah baik untuk memperluaskan pilihan kami dan membuka pilihan percetakan kami.
Fon WOFF mempunyai faedah yang berikut:
- Mereka lebih mudah diakses daripada fon sebagai imej. WOFF mengarang teks HTML biasa dengan CSS, memberikan anda aksesibilitas dan kawalan reka bentuk yang imej tidak akan dibenarkan.
- Fail WOFF termasuk maklumat tipografi seperti bentuk kontekstual dan angka gaya lama. Ini memberikan tipografi laman web anda dengan lebih baik kerana anda menggunakan watak yang betul, bukan hanya anggaran.
- WOFF fon boleh membantu dengan pengantarabangsaan kerana anda boleh membenamkan fon dengan aksara dari bahasa lain.
- Seperti semua teks gaya CSS, fon yang digayakan dengan WOFF lebih mesra enjin carian. Enjin carian tidak "melihat" teks yang tertanam dalam imej, dan sementara teks ALT dapat membantu, tidak ada pengganti teks itu sendiri.
- Fon WOFF dimampatkan, jadi ia lebih kecil daripada jenis fail fon lain. Ini akan membantu dengan kelajuan muat turun tapak dan prestasi keseluruhan.
- Anda boleh menggunakan fail WOFF untuk mengekalkan identiti jenama anda dengan memasukkan fon korporat anda sebagai fail WOFF.
Sokongan Penyemak Imbas WOFF
WOFF mempunyai sokongan pelayar yang sangat baik dalam pelayar moden, termasuk:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Ia pada dasarnya disokong di seluruh papan hari ini, dengan pengecualian tunggal yang menjadi semua versi Opera Mini.
Bagaimana Menggunakan WOFF Fonts
Untuk menggunakan fail WOFF, anda perlu memuat naik fail WOFF ke pelayan web anda, beri nama dengan @ font-face property, dan kemudian hubungi font di CSS anda. Sebagai contoh:
- Muat naik fon yang dipanggil myWoffFont.woff ke direktori / fon di pelayan web.
- Dalam fail CSS anda, tambah bahagian @ font-face:
@ font-face {
font-family: myWoffFont;
format src: url ('/ fonts / myWoffFont.woff') ('woff');
}
- Tambahkan nama fon baru (myWoffFont) ke stack font CSS anda, seperti mana nama fon lain anda:
p {
font-family: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
Di mana untuk Dapatkan WOFF Font
Terdapat dua tempat hebat yang boleh anda dapati banyak font WOFF yang percuma untuk kegunaan komersil dan bukan komersil:
- Perpustakaan Fon Terbuka
- Tupai Font
Sekiranya anda mempunyai lesen untuk menggunakan font yang tidak terdapat dalam format WOFF, anda boleh menggunakan pencipta WOFF seperti Font Squirrel untuk menukar fail font anda ke dalam fail WOFF. Terdapat juga alat baris arahan dipanggil sfnt2woff yang boleh anda gunakan pada Macintosh dan Windows untuk menukar fon TrueType / OpenType anda ke WOFF.
Muat turun binari yang sesuai dengan sistem anda dan jalankan di baris arahan (atau Terminal) dan ikut arahan.
Contoh WOFF
Berikut adalah beberapa contoh fail WOFF: WOFF Page pada HTML5 dalam 24 Jam.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 7/11/17