Home > Article > Web Front-end > How to Ensure Cross-Browser Compatibility When Embedding .otf Fonts?
Embedding .otf Fonts for Cross-Browser Compatibility
For web-based font trials, .otf fonts present a challenge in achieving compatibility across various browsers. This article provides guidance on embedding .otf fonts and explores alternative solutions for ensuring broad browser support.
Embedding .otf Fonts with @font-face
To embed an .otf font using @font-face, utilize the following syntax:
<code class="css">@font-face { font-family: FontName; src: url("FontFile.otf") format("opentype"); }</code>
While .otf fonts now have improved browser compatibility, older Safari, Android, and iOS browsers may require alternate font types.
Alternative Font Types for Broad Browser Support
For a wider range of browser support, consider using WOFF (Web Open Font Format) and TTF (TrueType Font) font types. WOFF is supported by major desktop browsers, while TTF acts as a fallback for older browsers.
<code class="css">@font-face { font-family: FontName; src: url("FontFile.woff") format("woff"), url("FontFile.ttf") format("truetype"); }</code>
Comprehensive Browser Support
To cater to the widest possible browser compatibility, including legacy browsers, additional font types may be required.
<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>
refer to the following resources for browser support details:
The above is the detailed content of How to Ensure Cross-Browser Compatibility When Embedding .otf Fonts?. For more information, please follow other related articles on the PHP Chinese website!