@font-face ialah modul dalam CSS3 Ia membenamkan fon Web yang ditakrifkan sendiri ke dalam halaman web anda Dengan kemunculan modul @font-face, kami tidak perlu lagi menggunakan fon dalam pembangunan Web bimbang tentang hanya menggunakan fon selamat web! Sesetengah orang pasti akan bertanya, bolehkah IE menyokong perkara sedemikian? Izinkan saya memberitahu anda bahawa fungsi @font-face telah disokong seawal IE4 Anda pasti akan terkejut. Jika anda melihat beberapa tapak web atau blog Bahasa Inggeris dan melihat beberapa fon Web tersuai yang cantik, seperti logo pada halaman utama, Teg dan gaya bahasa Inggeris tulisan tangan pada halaman, dalam satu perkataan ini semua dilaksanakan oleh @font-face.
Pertama, mari kita lihat peraturan tatabahasa @font-face:
@ fon- muka {
[font-keluarga: <nama-keluarga>;]?
[src: [ <uri> [format(<string>#)]? < nama-muka-fon> ]#;]?
[julat-unikod: <urange>#;]?
[varian-fon: <varian-fon>; ? 🎜>
[berat fon: <berat>]; [gaya fon: <gaya>];}Perihalan nilai: fon-family: Tetapkan nama fon teks. gaya fon: Tetapkan gaya teks. varian fon: Tetapkan sama ada teks adalah huruf besar atau huruf kecil. berat fon: Tetapkan ketebalan teks. regangan fon: Tetapkan sama ada teks diregangkan secara mendatar. saiz fon: Tetapkan saiz fon teks. src: Tetapkan laluan relatif atau laluan mutlak fon tersuai Ambil perhatian bahawa atribut ini hanya boleh digunakan dalam peraturan @font-face. Pelayar yang serasiBercakap tentang isu keserasian penyemak imbas dengan @font-face, ini melibatkan isu format fon, kerana penyemak imbas yang berbeza mempunyai sokongan yang tidak konsisten untuk format fon, jadi adalah perlu untuk semua orang memahami jenis fon yang disokong oleh pelbagai versi pelayar saya secara ringkas menyebut beberapa format yang berkaitan dengan fon sebelum ini. Saya akan membincangkannya secara berasingan di bawah. 1. Format TrueTpe (.ttf):
font .ttf ialah fon yang paling biasa untuk Windows dan Mac, dan merupakan format RAW, jadi Ia tidak dioptimumkan untuk tapak web penyemak imbas yang menyokong fon ini termasuk [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mudah Alih Safari4.2+]; 2. OpenType (.otf) format : . Fon otf dianggap sebagai format fon asal, yang dibina berdasarkan TrueType, jadi ia juga menyediakan lebih banyak fungsi Penyemak imbas yang menyokong fon ini ialah [Firefox3.5+ , Chrome4.0+, Safari3.1+, Opera10. 0+, iOS Mudah Alih Safari4.2+]; 3. Format Fon Terbuka Web (.woff): .woff Fon ialah format terbaik antara fon Web versi mampat TrueType/OpenType yang terbuka dan turut menyokong pengasingan pakej metadata Penyemak imbas yang menyokong fon ini termasuk [IE9+, Firefox3.5+, Chrome6+, Safari3, Opera11.1+];4. Format Jenis Terbuka Terbenam (.eot):
font eot ialah fon khas untuk IE format ini boleh dibuat daripada TrueType.
5. Format SVG (.svg):
fon .svg ialah format berdasarkan pemaparan fon SVG yang menyokong fon ini termasuk [Chrome4+, Safari3.1+, Opera10 +, iOS Mudah Alih Safari3.2+].
Nota: Untuk melaksanakan kesan penyemak imbas dalam bahagian ini, anda perlu memuat turun fail format fon di atas! ! !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> 需要引入外部字体文件显示效果。</p>
</body>
</html>