Bagaimana untuk Memastikan Keserasian Merentas Pelayar Apabila Membenamkan Fon .otf?

Membenamkan Fon .otf untuk Keserasian Merentas Pelayar

Untuk percubaan fon berasaskan web, fon .otf memberikan cabaran dalam mencapai keserasian merentas pelbagai pelayar. Artikel ini menyediakan panduan tentang membenamkan fon .otf dan meneroka penyelesaian alternatif untuk memastikan sokongan penyemak imbas yang luas.

Membenamkan .otf Font dengan @font-face

Untuk membenamkan . fon otf menggunakan @font-face, gunakan sintaks berikut:

<code class="css">@font-face {
    font-family: FontName;
    src: url("FontFile.otf") format("opentype");
}</code>

Walaupun fon .otf kini telah meningkatkan keserasian penyemak imbas, penyemak imbas Safari, Android dan iOS yang lebih lama mungkin memerlukan jenis fon ganti.

Jenis Fon Alternatif untuk Sokongan Penyemak Imbas Luas

Untuk rangkaian sokongan penyemak imbas yang lebih luas, pertimbangkan untuk menggunakan jenis fon WOFF (Format Fon Terbuka Web) dan TTF (TrueType Font). WOFF disokong oleh penyemak imbas desktop utama, manakala TTF bertindak sebagai sandaran untuk penyemak imbas lama.

<code class="css">@font-face {
    font-family: FontName;
    src: url("FontFile.woff") format("woff"), url("FontFile.ttf") format("truetype");
}</code>

Sokongan Penyemak Imbas Komprehensif

Untuk memenuhi keserasian penyemak imbas seluas mungkin , termasuk penyemak imbas lama, jenis fon tambahan mungkin diperlukan.

<code class="css">@font-face {
    font-family: FontName;
    src: url("FontFile.eot"); /* IE9 Compat Modes */
    src: url("FontFile.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("FontFile.woff") format("woff"), /* Modern Browsers */
         url("FontFile.ttf") format("truetype"), /* Safari, Android, iOS */
         url("FontFile.svg#svgFontName") format("svg"); /* Legacy iOS */
}</code>

rujuk sumber berikut untuk butiran sokongan penyemak imbas:

• [@font-face Browser Support](https ://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/Syntax)
• [Sokongan Penyemak Imbas EOT](https://www.zachleat.com/web/ eot-support/)
• [Sokongan Penyemak Imbas WOFF](https://www.caniuse.com/woff)
• [Sokongan Penyemak Imbas TTF](https://www.caniuse.com /ttf)
• [Sokongan Penyemak Imbas SVG-Fonts](https://www.caniuse.com/svg)

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Keserasian Merentas Pelayar Apabila Membenamkan Fon .otf?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!