Yang @font-facememerintah membolehkan fon langganan yang akan dimuatkan pada halaman web. Setelah ditambahkan ke lembar gaya, aturan memerintahkan penyemak imbas untuk memuat turun fon dari tempat dihoskan, kemudian menampilkannya seperti yang ditentukan dalam CSS.
Tanpa peraturan, reka bentuk kami terbatas pada fon yang sudah dimuat di komputer pengguna, yang berbeza-beza bergantung pada sistem yang digunakan. Berikut adalah pecahan fon sistem yang ada.
Sokongan Penyemak Imbas Paling Dalam
Ini adalah kaedah dengan sokongan sedalam mungkin sekarang. Yang @font-facememerintah perlu ditambah kepada stylesheet sebelum apa-apa gaya.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Kemudian gunakannya untuk menggayakan elemen seperti ini:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Tahap Praktikal Penyokong Penyemak Imbas
Segala-galanya beralih ke arah WOFF dan WOFF 2, jadi kita mungkin dapat melarikan diri dengan:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Sokongan Penyemak Imbas Lebih Sedikit
Sekiranya anda memerlukan medium yang senang antara sokongan penuh dan sokongan praktikal, ini akan merangkumi beberapa asas lagi:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Sokongan Penyemak Imbas Super Progresif
Sekiranya kita mempertaruhkan ladang di WOFF, maka kita dapat mengharapkan sesuatu beralih ke arah WOFF2 pada suatu ketika. Ini bermakna kita dapat hidup di pinggir pendarahan dengan:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Tidak | 35+ dengan bendera | 23+ | Tidak | 37 | Tidak |
Teknik Alternatif
@import
Walaupun @font-facesangat baik untuk fon yang dihoskan di pelayan kita sendiri, mungkin ada situasi di mana penyelesaian fon yang dihoskan lebih baik. Google Font menawarkan ini sebagai cara untuk menggunakan fon mereka. Berikut ini adalah contoh penggunaan @importuntuk memuatkan font Open Sans dari Google Font:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Kemudian kita boleh menggunakannya untuk menggayakan elemen:
body ( font-family: 'Open Sans', sans-serif; )Sekiranya anda membuka URL untuk fon, anda sebenarnya dapat melihat semua @font-facekerja yang dilakukan di belakang tabir.
Manfaat menggunakan perkhidmatan yang dihoskan adalah kemungkinan merangkumi semua variasi fail fon, yang memastikan keserasian lintas-penyemak imbas yang mendalam tanpa harus menjadi tuan rumah semua fail itu sendiri.
Lihat Pen Menggunakan @import untuk fon tersuai oleh CSS-Tricks (@ css-tricks) di CodePen.
lembaran gaya
Begitu juga, anda boleh membuat pautan ke aset yang sama seperti fail CSS lain, dalam dokumen HTML dan bukan di CSS. Dengan menggunakan contoh yang sama dari Google Font, inilah yang akan kita gunakan:
Kemudian, kita boleh menggayakan elemen kita seperti kaedah lain:
body ( font-family: 'Open Sans', sans-serif; )Sekali lagi, ini mengimport @font-faceperaturan tetapi, alih-alih memasukkannya ke helaian gaya kami, mereka ditambahkan ke HTML kami sebagai gantinya.
Lihat Pen Menggunakan untuk fon tersuai oleh CSS-Tricks (@ css-tricks) di CodePen.
Ini hampir sama ... kedua-dua teknik memuat turun aset yang diperlukan.
Memahami Jenis Fail Font
Coretan asal di bahagian atas siaran ini merujuk banyak fail dengan sambungan pelik. Mari kita bahas masing-masing dan dapatkan pemahaman yang lebih baik tentang maksudnya.
WOFF / WOFF2
Bermaksud: Format Font Terbuka Web.
Dicipta untuk digunakan di web, dan dikembangkan oleh Mozilla bersama dengan organisasi lain, fon WOFF sering dimuat lebih cepat daripada format lain kerana mereka menggunakan versi struktur yang dimampatkan yang digunakan oleh font OpenType (OTF) dan TrueType (TTF). Format ini juga dapat memasukkan maklumat metadata dan lesen dalam fail fon. Format ini nampaknya menjadi pemenang dan ke mana semua penyemak imbas menuju.
WOFF2 adalah generasi berikutnya WOFF dan menawarkan mampatan yang lebih baik daripada yang asal.
SVG / SVGZ
Bermaksud: Grafik Vektor Berskala (Font)
SVG adalah vektor penciptaan semula fon, yang menjadikannya lebih ringan dalam ukuran fail, dan juga menjadikannya ideal untuk penggunaan mudah alih. Format ini adalah satu-satunya yang dibenarkan oleh Safari versi iOS dan ke bawah untuk iOS. Fon SVG pada masa ini tidak disokong oleh Firefox, IE atau IE Mobile. Firefox telah menangguhkan pelaksanaannya selama-lamanya untuk memberi tumpuan kepada WOFF.
SVGZ adalah versi SVG yang zip.
EOT
Bermaksud: Jenis Terbuka Terbenam.
Format ini dibuat oleh Microsoft (inovator asal @font-face) dan merupakan standard fail proprietari yang hanya disokong oleh IE. Sebenarnya, ia adalah satu-satunya format yang akan dikenali oleh IE8 ke bawah semasa menggunakan @font-face.
OTF / TTF
Bermaksud : OpenType Font dan TrueType Font.
Format WOFF pada awalnya dibuat sebagai reaksi terhadap OTF dan TTF, sebahagiannya, kerana format ini dapat disalin dengan mudah (dan secara haram). Namun, OpenType mempunyai kemampuan yang mungkin diminati oleh banyak pereka (ligatur dan semacamnya).
Catatan mengenai Prestasi
Fon web bagus untuk reka bentuk tetapi penting juga untuk memahami kesannya terhadap prestasi web. Fon khusus sering menyebabkan laman web mendapat prestasi kerana fon mesti dimuat turun sebelum dipaparkan.
Simptom yang biasa digunakan adalah momen singkat di mana fon dimuatkan sebagai fallback, kemudian berkelip ke fon yang dimuat turun. Paul Irish mempunyai catatan yang lebih lama mengenai ini (digelar "FOUT": Flash Of Unstyled Text).
Pada masa ini, penyemak imbas pada umumnya menyembunyikan teks sebelum fon tersuai dimuat secara lalai. Lebih baik atau lebih teruk? Awak tentukan. Anda boleh melakukan kawalan ini melalui pelbagai teknik. Sedikit di luar ruang lingkup untuk artikel ini, tetapi berikut adalah tiga artikel dari Zach Leatherman untuk membuat anda memulakan lubang arnab:
- Lebih baik @ font-face dengan Font Load Events
- Cara kami menggunakan font web dengan penuh tanggungjawab, atau, mengelakkan @ font-face-palm
- Flash Faux Text-masih banyak lagi pada Pemuatan Font
Berikut adalah beberapa pertimbangan lain semasa melaksanakan fon tersuai:
Perhatikan saiz fail
Font boleh menjadi sangat berat, jadi bersandar pada pilihan yang menawarkan versi yang lebih ringan. Contohnya, pilih set fon yang berukuran 50KB berbanding yang mempunyai berat 400KB.
Hadkan set watak, jika boleh
Adakah anda benar-benar memerlukan pemberat tebal dan hitam untuk satu fon? Mengehadkan set fon anda untuk memuatkan hanya apa yang digunakan adalah idea yang baik dan terdapat beberapa petua yang baik di sini.
Pertimbangkan fon sistem untuk skrin kecil
Banyak peranti tersekat pada sambungan yang buruk. Salah satu muslihatnya adalah menyasarkan layar yang lebih besar ketika memuat font khusus menggunakan @media.
Dalam contoh ini, skrin yang lebih kecil daripada 1000 piksel akan disajikan fon sistem dan skrin yang lebar dan ke atas akan disajikan fon khusus.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Perkhidmatan Font
Terdapat sejumlah perkhidmatan yang akan menghosting fon dan menyediakan akses ke fon berlesen komersial juga. Manfaat menggunakan perkhidmatan sering kali timbul kerana terdapat banyak pilihan fon sah yang dihantar dengan cekap (contohnya memberikannya dalam CDN yang pantas).
Berikut adalah beberapa perkhidmatan fon yang dihoskan:
- Tipografi Awan
- Typekit
- Fontdeck
- Jenis Web
- Fontspring
- Jenis huruf
- Fonts.com
- Fon Google
- Tupai Font
Bagaimana dengan Fon Ikon?
Memang benar, @ font-face dapat memuatkan fail font yang penuh dengan ikon yang dapat digunakan untuk sistem ikon. Namun, saya rasa anda lebih baik menggunakan SVG sebagai sistem ikon. Berikut adalah perbandingan kedua kaedah.
Lebih Banyak Sumber
- Asas API Font Google
- Keluarga Font CSS