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.

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:

.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:

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

4. Format Jenis Terbuka (.eot):

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.

Paul Irish

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:

Tentukan Font Web anda sendiri melalui @font-face:

   @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 */
   }

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

)

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!