Nilai format yang mungkin untuk src muka fon

Question

Bagaimana anda tahu apa yang perlu digunakan, bila hendak menggunakannya dan sama ada anda benar-benar memerlukannya?

Banyak tapak mempunyai contoh seperti ini, tetapi dalam susunan yang berbeza:

@font-face {
  font-family: 'Contoh';
  src: url('Contoh.eot');
  src: url('Contoh.eot?#iefix') format('embedded-opentype'),
       url('Contoh.woff2') format('woff2'),
       url('Contoh.woff') format('woff'),
       url('Contoh.ttf') format('truetype'),
       url('Example.svg#svgExample') format('svg');
}

Tetapi saya juga pernah melihat contoh seperti ini:

@font-face {
  font-family: 'Contoh';
  src: url('Contoh.woff2') format('woff');
}
@font-face {
  font-family: 'Contoh';
  src: url('Contoh.ttf') format('woff2-variations');
}
@font-face {
  font-family: 'Contoh';
  src: url('Contoh.otf');
}

Kadangkala format kelihatan sama dengan penghujung fail, kadangkala penghujung fail disingkatkan atau sekurang-kurangnya sebahagiannya sama, dan pada masa lain ia kelihatan seperti rentetan rawak sepenuhnya, atau kadangkala tiada langsung jika ia hanya fail .

Answer 1

Tidak penting untuk mengetahui semua nilai format yang mungkin - kerana kebanyakannya berasal daripada pelaksanaan pelayar percubaan.

Malah, anda mungkin membandingkan beberapa nilai pemformatan dengan awalan penyemak imbas CSS - mujurlah nilai tersebut menjadi kurang relevan - malangnya, ia kadangkala masih relevan.

Rujuk @font-face contoh pertama anda:

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

.otf format ('opentype')

.otf Sebenarnya hilang - tetapi ia tiada kaitan dengan penggunaan rangkaian.

src: url("Example.otf") format("opentype");

Serupa dengan truetype, ia boleh dipasang secara tempatan dan digunakan dalam mana-mana aplikasi desktop.

Dalam bahasa penghantaran fon: Fail fon OTF juga dikenali sebagai fon Jenis Terbuka "rasa pasca skrip".
Dan fon .ttf/truetype juga dipanggil fon Jenis Terbuka "Truetype berperisa".

Fon

.otf tidak mempunyai pemampatan fail lanjutan berbanding woff2.

.eot format('embedded-opentype')

Hanya digunakan oleh Internet Explorer - tetapi kekejaman ini sekurang-kurangnya mampu menghasilkan ttf/truetype.

.eot Lapuk
(Melainkan anda perlu mengekalkan beberapa sistem terbenam yang berjalan pada sistem terbenam tingkap khas).

.svg format ('svg')

Hanya disokong oleh penyemak imbas webkit (safari, epiphany, midori) dan penyemak imbas Android.
Walau bagaimanapun, semua pelayar di atas juga menyokong woff2, woff atau truetype.
Paling penting, ia tidak disokong oleh pelayar berasaskan Chromium/Blink (opera, Vivaldi, Brave, Internet Explorer 13/Edge) atau Firefox.

Tiada .svg fail fon diperlukan (walaupun ia boleh digunakan dengan mudah sebagai format pertukaran untuk penjana ikon seperti icomoon)

.format ttf ('truetype')

Mungkin format fon yang disokong terbaik, tetapi tidak padat seperti woff2 atau woff.
Selain itu, fon truetype tersedia dalam persekitaran desktop dan oleh itu boleh dipasang dan digunakan secara asli dalam sebarang aplikasi.

Masih relevan untuk beberapa kes penggunaan (cth. penukaran pdf).

Fon boleh ubah

Anda mungkin terjumpa simbol lama seperti dalam siaran ini: petua css

src: url("Example.woff2") format("woff2 supports variations"),
       url("Example.woff2") format("woff2-variations");

Jenis format tambahan ini berasal dari masa sokongan fon berubah masih dalam percubaan.
Hari ini, mereka tidak lagi diperlukan - hanya gunakan pengecam format biasa.

Anda "mungkin" meninggalkan format ini juga

Kebanyakan penyemak imbas moden boleh memetakan fail fon kepada keluarga fon walaupun tanpa format tertentu.
Namun, adalah idea yang baik untuk memasukkannya.

Tetapi: nilai format yang salah boleh melanggar peraturan @font-face anda!

Kesilapan biasa:

url('Example.ttf') format('ttf') //not correct

bukannya

url('Example.ttf') format('truetype') //correct

...jangan lupa sifat berat dan gaya

@font-face {
  font-family: 'Example';
  src: url('Example.woff2') format('woff2'),
       url('Example.woff') format('woff'),
       url('Example.ttf') format('truetype');
       font-weight:400;
       font-style: normal;
       font-stretch: 100%;
}

/* next font style: e.g bold italic condensed */
@font-face {
  font-family: 'Example';
  src: url('Example_boldItalicCn.woff2') format('woff2'),
       url('Example_boldItalicCn.woff') format('woff'),
       url('Example_boldItalicCn.ttf') format('truetype');
       font-weight:700;
       font-style: italic;
       font-stretch: 50%;
}

Fon boleh ubah @font-face

Dalam kes ini, berat fon dan sifat lain mengandungi 2 nilai untuk menentukan julat, contohnya font-weight: 100 1000.

@font-face {
  font-family: 'Example;
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(Example.woff2) format('woff2');
}