Apakah peraturan CSS yang diperlukan untuk menentukan fon tersuai?

Mentakrifkan fon tersuai memerlukan peraturan CSS "@font-face". Peraturan "@font-face" adalah terutamanya untuk membenamkan fon Web yang ditentukan pengguna ke dalam halaman web, sintaksnya ialah "@font-face{font-family: 'font name';src:url('file address');} ".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara membuat halaman anda menyokong fon tersuai boleh dicapai dalam satu ayat menggunakan @font-face.

@font-face ialah modul dalam CSS3 terutamanya membenamkan fon web yang ditakrifkan sendiri ke dalam halaman web anda Dengan @font-faceDengan kemunculan modul, kami tidak takut bahawa kami hanya boleh menggunakan fon selamat Web apabila menggunakan fon dalam pembangunan Web. Mari lihat cara menggunakan @font-face.

Pertama, mari kita lihat peraturan tatabahasa @font-face:

   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

Penerangan Nilai

1 , YourWebFontName: Nilai ini merujuk kepada nama fon tersuai anda Sebaik-baiknya menggunakan fon lalai yang anda muat turun, yang akan dirujuk kepada keluarga fon dalam elemen Web anda. Seperti "font-family:"YourWebFontName";"

2. Nilai ini merujuk kepada laluan storan fon tersuai anda, yang boleh menjadi laluan relatif atau laluan mutlak; >3. Format: Nilai ini merujuk kepada format fon tersuai anda, yang digunakan terutamanya untuk membantu penyemak imbas mengenal pasti nilainya terutamanya jenis berikut: truetype, opentype, truetype-aat, embedded-opentype, avg. , dsb.;

4 Berat dan gaya: Anda mesti biasa dengan dua nilai ini.

Pelayar yang serasi

Bercakap tentang isu keserasian penyemak imbas dengan @font-face, ini melibatkan masalah format fon, kerana pelayar berbeza mempunyai sokongan yang tidak konsisten untuk format fon, adalah perlu untuk semua orang memahami jenis fon yang disokong oleh pelbagai versi pelayar saya sebutkan secara ringkas beberapa format yang berkaitan dengan fon tadi saya akan menerangkannya secara berasingan di bawah ini semua orang ada idea:

1. Format TrueTpe (.ttf):

.font ttf ialah yang paling biasa untuk Windows dan Mac Fon ialah 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]; otf) format:

font.otf dianggap sebagai format fon asal, yang dibina berdasarkan TrueType, jadi ia juga menyediakan lebih banyak fungsi Pelayar yang menyokong fon ini termasuk [Firefox3.5,. Chrome4.0, Safari3.1, Opera10.0, iOS Mudah Alih Safari4.2];

3. Format Fon Terbuka Web (.woff )Format:

. Fon woff ialah format terbaik antara fon Web Ia adalah versi mampat terbuka TrueType/OpenType Ia juga menyokong pengasingan pakej metadata dan menyokong penyemakan imbas fon ini .6, Opera11.1];

4. Format Jenis Terbuka (.eot):

fon khas untuk fon format ini boleh dibuat daripada TrueType. Penyemak imbas yang menyokong fon ini ialah [IE4]; berdasarkan pemaparan fon SVG yang menyokong fon ini termasuk [Chrome4, Safari3.1, Opera10.0, iOS Mobile Safari3.2].

Ini bermakna dalam @font-face kita memerlukan sekurang-kurangnya dua fon format, .woff dan .eot, malah .svg dan fon lain untuk menyokong lebih banyak versi penyemakan imbas.

Untuk membolehkan @font-face mencapai lebih banyak sokongan penyemak imbas,

Paul Irish

menulis sintaks @font-face unik yang dipanggil

Bulletproof @font-face :

mula-mula lihat cara melaksanakan fon biru dalam bahagian navigasi halaman utama W3CPLUS Jika kita mempunyai teg DOM seperti ini, kita perlu menggunakan fon tersuai:

Kod HTML:<.>

Tentukan Font Web anda sendiri melalui @font-face:

Saya menggunakan laluan relatif di sini, tetapi sudah tentu anda juga boleh menggunakan laluan mutlak. Pada ketika ini kita perlu menggunakan fon yang ditakrifkan pada halaman sebenar kita:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

Kesan:

(Video pembelajaran perkongsian:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

tutorial video css

)

Atas ialah kandungan terperinci Apakah peraturan CSS yang diperlukan untuk menentukan fon tersuai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!