Atoz CSS Screencast: Julat Unicode dan @Font-Face

Ringkasan mata utama

Peraturan CSS

membenarkan penggunaan fon tersuai dalam reka bentuk web, dengan itu meningkatkan prestasi dan meningkatkan tipografi. Pastikan untuk menguji fon tersuai ini pada sistem operasi dan pelayar yang berbeza untuk memastikan ia muncul dengan betul.
• Harta @font-face CSS boleh digunakan untuk mengehadkan pelbagai watak fon tersuai untuk memohon. Ini amat berguna untuk menambah aksara atau simbol khas terus ke tag, atau menggunakan fon khas untuk aksara tertentu.
• Dengan menggunakan harta unicode-range, anda boleh meningkatkan prestasi laman web dengan memastikan bahawa hanya aksara yang diperlukan dimuat turun dan digunakan, dengan itu mengurangkan jumlah data yang perlu dimuatkan. Walau bagaimanapun, adalah penting untuk diperhatikan bahawa tidak semua pelayar menyokong harta ini, jadi fon alternatif harus disediakan dalam kod CSS.
• unicode-range
Penjelasan video (petikan dari draf teks)

Di bahagian sebelumnya, kami mempelajari pelbagai sifat gaya teks.

Dalam pelayar moden (dan IE4 dan kemudian), kita boleh menambah

fon Custom

untuk meningkatkan reka bentuk laman web.

kita boleh menggunakan pelbagai ciri fon tersuai ini untuk membantu meningkatkan prestasi dan meningkatkan tipografi secara keseluruhan.

kita akan mempelajari bahagian ini:

Penjelasan terperinci mengenai peraturan

• cara menggunakan stack font dan @font-face untuk mengawal tipografi
• unicode-range

@font-face Pada masa lalu, pemilihan fon di laman web adalah terhad kepada sebilangan kecil fon "keselamatan rangkaian", seperti:

arial

komik sans
kurier baru
Georgia
kesan
Palatino
Tahoma
Times New Roman
Trebuchet
Verdana
• Beberapa fon ini sangat baik dan sesuai untuk laman web - Georgia adalah font serif, Arial atau Verdana adalah fon yang hebat. Komik sans pastinya bukan yang terbaik ...

Tetapi sekarang kita boleh menggunakan pelbagai fon tersuai dan menjadikannya muncul pada semua pelayar dengan menggunakan

.

Walaupun kita boleh @font-face melakukan ini, ia sentiasa bernilai menguji sebarang fon tersuai pada pelbagai sistem operasi dan pelayar untuk memastikan mereka kelihatan seperti yang diharapkan.

juga ingat bahawa fail fon boleh agak besar dalam saiz, jadi gunakannya dengan bijak untuk mengelakkan masalah prestasi. Sintaks

adalah seperti berikut:

fon dinamakan menggunakan atribut @font-face, dan kemudian menyediakan pelbagai jenis fail dan format yang berbeza untuk penyemak imbas yang berbeza.

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

Untuk mengelakkan pengguna memuat turun fon sedia ada dalam sistem, anda boleh menentukan nama font tempatan untuk dicari

. font-family

Untuk membuat semua format fon yang betul untuk penyemak imbas yang berbeza, saya menggunakan sumber dalam talian yang hebat yang dipanggil Font Squirrel.

Mereka mempunyai penjana fon web yang berfungsi dengan baik. Muat turun yang mereka sediakan juga termasuk semua coretan kod untuk menambah fon tersuai ini dalam CSS, yang juga berguna!

unicode-range

setiap watak dalam fon boleh digambarkan oleh nombor Unicode, dalam bentuk:

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

rentetan "atoz css" boleh diwakili oleh unicode seperti berikut:

<code>U+0041</code>

Setiap watak, termasuk ruang, mempunyai nombor Unicode yang unik. Set aksara UTF-8 juga mengandungi siri watak khas, yang berguna untuk menambahkan bentuk dan simbol terus ke markup.

Apabila menambah fon tersuai dengan @font-face kita boleh mengehadkan pelbagai watak yang mereka gunakan, yang pada pandangan pertama agak pelik, tetapi sila bersabar dengan saya untuk menerangkan.

simbol italic, font Baskerville sangat cantik dan banyak pereka suka menggunakannya walaupun mereka tidak menggunakan fon Baskerville yang lain.

Satu cara untuk menggunakan font khas ini untuk ampersand hanya untuk membungkusnya dalam tag <span> dan tetapkan font-family yang berbeza untuknya. Tetapi ini agak rumit dan boleh dilakukan sepenuhnya tanpa sebarang tanda tambahan.

kita boleh membuat fon yang hanya mengandungi watak ini dan menambahkannya ke timbunan fon kami sebagai font pertama dalam senarai.

Apabila penyemak imbas menemui watak yang tidak wujud dalam fon, ia akan mengimbas timbunan ke bawah sehingga ia mendapati fon yang mengandungi aksara yang diperlukan. Kita boleh mengambil kesempatan daripada tingkah laku ini untuk menambah ampersand khas apabila menggunakan sebarang font keselamatan atau rangkaian.

Pertama, kita membuat peraturan @font-face untuk memuatkan font aksara tunggal. Saya akan namakannya "Ampersand" dan menggunakan sumber fail font tempatan untuk menyimpan jalur lebar.

Saya nyatakan unicode-range sebagai U 0026 untuk watak ampersand tunggal. Keseluruhan pelbagai aksara boleh ditentukan, seperti yang ditunjukkan oleh nama harta, tetapi dalam kes ini hanya satu watak yang diperlukan.

<code>A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053</code>

Dalam contoh fail HTML ini, saya mempunyai satu siri tajuk dan perenggan, yang kedua -duanya mengandungi beberapa, simbol.

Saya akan membuat dua susunan fon yang berbeza, satu untuk tajuk dan satu untuk badan. Dalam setiap kes, fon pertama dalam timbunan akan menjadi fon "ampersand" adat.

Untuk tajuk, saya akan menambah fon Museo atau Rockwell atau Serif sebagai fon alternatif.

Untuk badan, saya akan menambah Avenir, Arial, atau Sans-Serif sebagai font alternatif.

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

itu sahaja. Apabila penyemak imbas membuat teks, fon pertama dalam timbunan mengandungi hanya satu watak ampersand, jadi ia akan menjadikan seluruh watak menggunakan font seterusnya dalam senarai (jika dijumpai).

Sokongan penyemak imbas

unicode-range adalah baik. Ia disokong dalam semua pelayar moden (kecuali Firefox) dan juga dalam IE9 dan kemudian. Oleh kerana ini adalah peningkatan visual semata -mata, sokongan penyemak imbas bukanlah masalah besar bagi saya - pelayar yang tidak disokong hanya akan mendapat font pertama dalam timbunan yang boleh dimuatkan dengan jayanya.

(bahagian FAQ berikutnya telah ditinggalkan kerana ia tidak sepadan dengan matlamat asal pseudo dan terlalu lama. Kandungan teras telah ditunjukkan dalam bahagian di atas.)

Atas ialah kandungan terperinci Atoz CSS Screencast: Julat Unicode dan @Font-Face. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!