Fon Variabel: Apa yang Mereka, dan Cara Menggunakannya

Dalam artikel ini, kita akan melihat kemungkinan baru yang menarik di sekitar fon pembolehubah - kini dibundel dengan format fon OpenType Scalable - yang membolehkan satu fon untuk berkelakuan seperti pelbagai fon.

Takeaways Key

Fon berubah -ubah, yang dibundel dengan format fon OpenType Scalable, membolehkan satu fon untuk berkelakuan seperti pelbagai fon, dengan variasi yang ditakrifkan dalam fon itu sendiri, memudahkan struktur fon dan meningkatkan prestasi.
fon pembolehubah boleh dilaksanakan menggunakan font-optik-sising, gaya font, font-weight, dan font-stretch untuk mengawal paksi standard, atau sifat-sifat CSS-variasi untuk kawalan tahap rendah ke atas OpenType atau TrueType variasi fon.
Prestasi adalah kelebihan utama fon berubah -ubah, dengan fail fon tunggal yang mampu mencipta pelbagai berat, mengurangkan berat halaman dengan ketara. Format fail Woff2 dapat memampatkan lagi fon ini, memberikan manfaat prestasi tambahan.
Sokongan penyemak imbas untuk fon berubah -ubah masih terhad, dan kejatuhan mungkin perlu digunakan untuk pelayar yang tidak menyokong fon berubah -ubah. Ini boleh melibatkan berkhidmat fon yang tidak berubah atau menggunakan sandaran fon sistem operasi.
Walaupun berada di peringkat awal, potensi fon berubah -ubah sangat besar, menawarkan prestasi yang lebih baik dan memudahkan pembangunan. Mereka dapat mengurangkan ketergantungan pada pelbagai fail fon dan memotong berat halaman.

bagaimana kita sampai di sini

Apabila HTML dicipta, fon dan gaya dikawal secara eksklusif oleh tetapan setiap pelayar web. Pada pertengahan tahun 90-an, typefaces pertama untuk media berasaskan skrin dicipta: Georgia dan Verdana. Ini, bersama -sama dengan fon sistem - Arial, Times New Roman, dan Helvetica - adalah satu -satunya fon yang tersedia untuk pelayar web (bukan satu -satunya yang kita dapati dalam setiap sistem operasi).

Dengan evolusi pelayar web, inovasi seperti tag pada Netscape Navigator dan spesifikasi CSS pertama membolehkan laman web untuk mengawal fon apa yang dipaparkan. Walau bagaimanapun, fon ini perlu dipasang pada komputer pengguna.

Pada tahun 1998, Kumpulan Kerja CSS mencadangkan sokongan peraturan @font-face untuk membolehkan mana-mana jenis huruf diberikan di laman web. IE4 melaksanakan teknologi tetapi pengagihan fon kepada pelayar setiap pengguna menimbulkan isu pelesenan dan cetak rompak.

awal tahun 2000an menyaksikan kebangkitan teknik penggantian imej yang menggantikan kandungan HTML dengan imej teks gaya. Setiap teks perlu dihiris dalam program seperti Photoshop. Teknik ini mempunyai kelebihan utama yang membolehkan pereka menggunakan mana -mana jenis huruf yang tersedia tanpa perlu berurusan dengan pelesenan font.

Pada tahun 2008, @Font-Face akhirnya membuat kemunculan semula apabila Apple Safari dan Mozilla Firefox melaksanakannya. Ini keluar dari keperluan menyediakan cara yang mudah untuk pereka dan pemaju untuk menggunakan fon tersuai dan bukannya imej yang tidak dapat diakses.

Tidak sampai kedatangan modul fon CSS3 pada tahun 2012 yang memuat turun fon menjadi berdaya maju. Setelah dilaksanakan, fon yang dimuat turun oleh laman web hanya boleh digunakan pada halaman itu dan tidak disalin ke sistem operasi. Muat turun fon dibenarkan fon jauh dimuat turun dan digunakan oleh penyemak imbas, yang bermaksud bahawa pereka web kini boleh menggunakan fon yang tidak dipasang pada komputer pengguna. Apabila pereka web mendapati fon yang mereka ingin gunakan, mereka hanya perlu memasukkan fail fon pada pelayan web, dan ia akan dimuat turun secara automatik kepada pengguna apabila diperlukan. Fon ini dirujuk menggunakan peraturan @font-face.

untuk menggunakan peraturan @font-face kita perlu menentukan nama fon dan menunjuk pada fail font:

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Fail font boleh menjadi salah satu daripada lima format yang berbeza: TTF, Woff, Woff2, SVG atau EOT. Setiap mempunyai kelebihan dan kekurangannya sendiri. Meletakkannya semata -mata, EOT dicipta oleh Microsoft dan hanya disokong oleh Internet Explorer. TTF adalah fon jenis asas yang dibuat oleh Microsoft dan Apple, dan ia berfungsi hampir sempurna di mana -mana. SVG didasarkan pada teknik penggantian imej dan hanya sesuai untuk web. Akhirnya, Woff dan Woff2 juga dicipta secara eksklusif untuk web dan pada dasarnya fail TTF dengan pemampatan tambahan.

Fon Variable

Versi 1.8 OpenType (format fon berskala komputer) dikeluarkan pada tahun 2016. Teknologi baru yang dihantar dengannya: variasi font OpenType, juga dikenali sebagai fon berubah -ubah.

Teknologi ini membolehkan satu fon untuk berkelakuan seperti pelbagai fon. Ia dilakukan dengan menentukan variasi dalam font. Variasi ini berasal dari fakta bahawa setiap watak hanya mempunyai satu garis besar. Titik yang membina garis besar ini mempunyai arahan tentang bagaimana mereka harus berkelakuan. Ia tidak perlu untuk menentukan pelbagai berat fon kerana ia boleh diinterpolasi antara definisi yang sangat sempit dan sangat luas. Ini juga memungkinkan untuk menjana gaya di antara-sebagai contoh, separuh berani dan berani. Variasi ini boleh bertindak sepanjang satu atau lebih paksi fon. Pada imej di bawah, kami mempunyai contoh interpolasi garis besar ini pada huruf A.

mengapa fon berubah -ubah relevan?

Fon pembolehubah boleh membawa kedua -dua kesederhanaan ke struktur fon dan penambahbaikan prestasi kami. Ambil contoh keadaan di mana laman web kami memerlukan lima gaya fon. Ia akan menjadi lebih kecil dan lebih cepat untuk menyediakan satu fon pembolehubah tunggal yang mampu memberikan lima gaya daripada yang perlu memuatkan lima fail fon yang berbeza.

Menggunakan fon variabel

Terdapat dua cara yang berbeza untuk menggunakan fon berubah -ubah. Pertama, kita akan melihat cara moden untuk melaksanakannya. Spesifikasi CSS lebih suka menggunakan font-optik, gaya font, font-weight dan font-stretch untuk mengawal mana-mana paksi standard.

Font-Optical-Sizing

Harta ini membolehkan pemaju mengawal sama ada atau tidak penyemak imbas memberikan teks dengan representasi visual yang sedikit berbeza untuk mengoptimumkan tontonan pada saiz yang berbeza. Ia boleh mengambil nilai tiada, kerana apabila penyemak imbas tidak dapat mengubah bentuk glyphs, atau auto untuk apabila ia boleh. Pada penyemak imbas yang menyokong saiz font-optik, fon di mana nilai ditetapkan ke auto boleh berubah seperti font dalam imej di bawah:

dengan nilai yang ditetapkan kepada tiada tidak akan ada variasi pada font.

gaya font

Harta ini menentukan sama ada fon harus digayakan dengan wajah normal, italik, atau serong dari keluarga fonnya. Ia boleh mengambil nilai normal, italik atau serong.

font-weight

Harta ini menentukan berat (atau keberanian) fon. Satu perkara yang perlu diperhatikan ialah, dengan fon biasa, contoh yang dinamakan boleh ditakrifkan. Sebagai contoh, BOLD adalah sama dengan Font-Weight: 700 atau Light Extra adalah sama dengan Font-Weight: 200. Property Font-Weight juga boleh menjadi nombor antara 1 dan 1000, tetapi apabila menggunakan fon berubah-ubah, disebabkan oleh Interpolarity, kita boleh mempunyai granulariti yang lebih halus. Sebagai contoh, nilai seperti font-weight: 200.01 kini mungkin.

font-stretch

Harta ini memilih muka yang normal, pekat, atau berkembang dari fon. Sama seperti harta font-berat, ia boleh menjadi contoh yang dinamakan seperti tambahan atau normal atau peratusan antara 0% dan 100%. Juga, contoh yang dinamakan akan memetakan peratusan yang diketahui. Sebagai contoh, tambahan kondensasi akan memetakan kepada 62.5%.

Untuk contoh ini, saya membuat halaman yang sangat mudah dengan satu

tajuk dan

perenggan.

Lihat fon pembolehubah pena HTML oleh SitePoint (@SitePoint) pada codepen.

Pada masa ini, laman web yang tidak terkawal kami kelihatan seperti ini:

Untuk menggunakan font pembolehubah, kita mesti mencari fail yang sesuai. Projek V-Font menyediakan repositori fon di mana kita boleh mencari dan bereksperimen dengan semua jenis fon pembolehubah. Saya memutuskan untuk menggunakan font AvenirNext dan menghubungkannya dari halaman GitHub rasminya.

maka kita perlu membuat fail CSS untuk memuatkan font baru ini:

Lihat font pembolehubah yang dimuatkan oleh pena oleh SitePoint (@SitePoint) pada codepen.

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Oleh kerana isu sokongan penyemak imbas, contoh ini hanya akan menggunakan variasi fon dalam safari dan krom.

Dengan fon kami dimuatkan, kini kami boleh menggunakan harta font-berat untuk memanipulasi paksi berat fon pembolehubah kami.

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Lihat Font Variabel Pena Sumber Pena oleh SitePoint (@SitePoint) pada Codepen.

Kebanyakan masa kita juga memerlukan dua fail fon yang berbeza: satu untuk italic dan satu untuk fon biasa (Roman). Ini berlaku kerana pembinaan fon ini boleh berbeza secara radikal.

Menggunakan penetapan variasi font

Cara kedua menggunakan fon berubah-ubah adalah dengan menggunakan harta CSS-penyepaduan fon-variasi. Harta ini diperkenalkan untuk memberikan kawalan ke atas variasi font OpenType atau TrueType, dengan menyatakan nama paksi empat huruf ciri-ciri yang anda ingin bervariasi bersama dengan nilai variasi mereka. Pada masa ini, kami mempunyai akses kepada aspek font berikut:

wght-Berat, yang sama dengan harta CSS fon-berat. Nilai boleh jadi dari 1 hingga 999.
wdth-lebar, yang sama dengan harta CSS font-stretch. Ia boleh mengambil kata kunci atau nilai peratusan. Paksi ini biasanya ditakrifkan oleh pereka font untuk mengembangkan atau memeluk dengan elegan.
opsz-saiz optik, yang boleh dihidupkan dan dimatikan menggunakan harta saiz font-optik.
ital-italicization, yang dikawal oleh sifat CSS gaya font apabila ditetapkan ke Italic.
slnt-slant, yang sama dengan harta CSS gaya font apabila ia ditetapkan untuk serong. Ia akan menjadi lalai ke slant 20 darjah, tetapi ia juga boleh menerima ijazah yang ditentukan antara -90Deg dan 90Deg.

Menurut spesifikasi, harta ini adalah ciri peringkat rendah yang direka untuk mengendalikan kes-kes khas di mana tidak ada cara lain untuk membolehkan atau mengakses ciri font OpenType wujud. Kerana itu, kita harus cuba menggunakan @font-face sebaliknya.

Menggunakan laman web dan fon yang sama seperti di atas, mari kita cuba menetapkan berat dan lebar pada fon kami menggunakan pengawal peringkat rendah:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

Lihat Font Variable Pen 1 oleh SitePoint (@SitePoint) pada codepen.

Pengisytiharan bersamaan dengan perisytiharan CSS berikut:

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Prestasi

Prestasi adalah kelebihan utama fon berubah -ubah. Fail font avenirnext_variable.ttf hanya 89kb tetapi mencipta pelbagai berat. Font standard setanding mungkin mempunyai fail yang lebih kecil tetapi hanya akan menyokong satu berat dan gaya. Pilihan selanjutnya memerlukan fail tambahan dan menaikkan berat halaman dengan sewajarnya.

tetapi kita boleh pergi lebih jauh. Apabila kami bercakap tentang format fon, kami berkata bahawa fail Woff2 pada dasarnya adalah fail TTF dengan pemampatan tambahan. Fail Woff2 lebih kecil kerana mereka menggunakan algoritma preprocessing dan mampatan adat untuk menyampaikan pengurangan saiz fail ~ 30% ke atas format lain.

Google menawarkan alat baris arahan yang akan memampatkan fail kami menukarkannya ke format Woff2.

Pada halaman GitHub rasmi alat, kami dapat mencari semua maklumat mengenainya. Untuk memasangnya pada persekitaran Unix, kita boleh menggunakan arahan berikut:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

Setelah memasangnya, kami boleh menggunakannya untuk memampatkan fail fon pembolehubah kami dengan menggunakan:

<span>h1 {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>font-weight: 430;
</span><span>}
</span>

dan kami berakhir dengan fail 42kb, yang separuh saiz fail. Untuk menggunakan fail ini, kita hanya perlu mengubah suai fail bersumber dan formatnya untuk menampung fail baru ini:

<span>p {
</span>  <span>font-variation-settings: 'wght' 630, 'wdth' 88;
</span><span>}
</span>

Kami kini mempunyai satu fail 42kb yang boleh digunakan untuk semua berat fon pada halaman kami. Satu -satunya kelemahan untuk format Woff2 ialah ia tidak disokong oleh Internet Explorer.

melayani fail yang berbeza untuk penyemak imbas yang berbeza

Walaupun beberapa pelayar moden sudah menyokong fon berubah -ubah (edisi pemaju Firefox mempunyai beberapa tahap sokongan, Chrome 62, Chrome Android, Safari IOS, dan Safari), mungkin ada kes di mana kita dapati yang tidak. >

Untuk mendapatkan sekitar ini, kita perlu sama ada berkhidmat tidak berubah untuk penyemak imbas tersebut atau menggunakan sandaran fon sistem operasi.

Pelayar yang menyokong fon pembolehubah akan memuat turun fail yang ditandakan sebagai format ('Woff2-variasi'), sementara pelayar yang tidak akan memuat turun fon gaya tunggal yang ditandakan sebagai format ('TTF'). Ini mungkin kerana kita boleh mengulangi rujukan kepada pembolehubah dalam setiap peraturan. Jika yang pertama gagal, yang kedua akan dimuatkan. Sama seperti yang berikut:

<span>p {
</span>  <span>font-weight: 630;
</span>  <span>font-stretch: 88;
</span><span>}
</span>

Contoh seterusnya menggunakan format fail yang berbeza dari yang kami bekerjasama, tetapi menggunakan prinsip yang sama:

Lihat pena pelbagai fon oleh SitePoint (@SitePoint) pada codepen.

Jika kita menyemak hasil pada penyemak imbas yang menyokong fon berubah, seperti Chrome, kita dapat melihat yang berikut:

pada penyemak imbas yang tidak menyokong fon berubah -ubah, seperti Firefox, fon kedua akan dimuatkan dan hasilnya akan kelihatan seperti ini:

Jika penyemak imbas hanya boleh memuatkan font standard, kami kehilangan prestasi dan memberi manfaat kepada fon berubah -ubah. Dalam situasi tersebut, ia mungkin lebih baik untuk menimpa fon sistem operasi yang setanding dan bukannya menggantikannya dengan banyak fon tetap.

Kesimpulan

Walaupun tersedia selama beberapa tahun sekarang, fon berubah -ubah masih di peringkat awal. Sokongan penyemak imbas adalah terhad dan terdapat beberapa fon untuk dipilih. Walau bagaimanapun, potensi adalah sangat besar, dan fon berubah -ubah akan membenarkan prestasi yang lebih baik sambil memudahkan pembangunan. Sebagai contoh, halaman depan SitePoint sendiri kini memuat lapan fail fon dengan jumlah 273KB. Fon berubah dapat mengurangkan ketergantungan ini dan memotong berat halaman lebih jauh.

Soalan Lazim (Soalan Lazim) Mengenai Font Variable

Apakah kelebihan menggunakan fon berubah -ubah? Pertama, mereka menyediakan pelbagai variasi dari fail fon tunggal, yang dapat mengurangkan saiz fail dan meningkatkan kelajuan pemuatan laman web. Ini amat bermanfaat untuk pengguna mudah alih yang mungkin mempunyai rancangan data yang terhad. Kedua, fon berubah -ubah membolehkan reka bentuk yang lebih kreatif dan responsif. Pereka boleh menyesuaikan berat, lebar, slant, dan sifat -sifat lain fon untuk mencipta pengalaman visual yang unik dan dinamik. Akhir sekali, fon pembolehubah dapat meningkatkan kebolehbacaan teks, terutamanya pada skrin kecil atau peranti resolusi rendah, dengan membenarkan pelarasan halus pada rendering fon. > Melaksanakan fon berubah -ubah dalam CSS melibatkan beberapa langkah. Pertama, anda perlu mengimport fail font pembolehubah menggunakan peraturan @font-face. Kemudian, anda boleh menggunakan harta 'Font-Variation-Settings' untuk menyesuaikan variasi fon. Sebagai contoh, 'penentuan variasi font: "wght' 700;

adalah fon berubah -ubah yang disokong oleh semua pelayar? Walau bagaimanapun, versi lama pelayar ini dan beberapa pelayar yang kurang biasa mungkin tidak menyokong mereka. Adalah idea yang baik untuk menyemak sokongan penyemak imbas khusus untuk fon berubah -ubah dan memberikan fon sandaran untuk penyemak imbas yang tidak disokong. . Apabila anda memilih fon pada font Google, anda boleh memilih pilihan "Variabel" untuk memuat turun versi Font Variable. Anda kemudian boleh menggunakan harta 'font-variasi-penyepit' dalam CSS untuk menyesuaikan variasi font.

Apakah beberapa fon pembolehubah yang popular? Fon ini menawarkan pelbagai variasi dan sesuai untuk pelbagai gaya reka bentuk. Anda boleh mencari lebih banyak fon berubah-ubah di laman web seperti v-fonts.com atau Google Font. Perisian khusus seperti Fontlab VI atau Glyphs. Program -program ini membolehkan anda merancang variasi fon yang berlainan dan mengeksportnya sebagai fail fon pembolehubah tunggal. Walau bagaimanapun, reka bentuk fon adalah proses yang kompleks yang memerlukan banyak amalan dan kemahiran. Tidak semua fon boleh didapati dalam format berubah -ubah, dan tidak semua pelayar menyokong mereka. Di samping itu, menyesuaikan variasi fon boleh menjadi kompleks dan memerlukan pemahaman yang baik tentang CSS dan reka bentuk fon. Akhir sekali, sementara fon berubah dapat mengurangkan saiz fail, mereka juga boleh meningkatkannya jika banyak variasi digunakan. bilangan fail fon yang perlu dimuatkan. Daripada memuatkan pelbagai fail untuk berat dan gaya fon yang berbeza, laman web boleh memuatkan fail fon pembolehubah tunggal dan menyesuaikan variasi yang diperlukan. Ini boleh mengurangkan saiz fail dan meningkatkan kelajuan pemuatan laman web. Dengan menghidupkan harta 'font-variasi-penyaringan', anda boleh membuat kesan teks dinamik yang mengubah berat, lebar, slant, atau atribut lain dari font dari masa ke masa. ? Fleksibiliti, kecekapan, dan potensi kreatif mereka menjadikan mereka alat yang berkuasa untuk pereka web. Walau bagaimanapun, pengangkatan mereka bergantung kepada sokongan penyemak imbas, ketersediaan fon berubah -ubah, dan keperluan dan kemahiran pereka.

Atas ialah kandungan terperinci Fon Variabel: Apa yang Mereka, dan Cara Menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!