Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memastikan Keserasian Merentas Pelayar Apabila Membenamkan Fon .otf?

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

Susan Sarandon
Susan Sarandonasal
2024-10-31 16:10:02192semak imbas

How to Ensure Cross-Browser Compatibility When Embedding .otf Fonts?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn