在Web 瀏覽器中嵌入OTF 字體進行字型試用

啟動一個需要線上字型試用的網站時，開發人員面臨嵌入. otf 字體以確保各種瀏覽器的兼容性。透過實作 @font-face CSS 規則，嵌入 OTF 字型成為可能：

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

瀏覽器相容性注意事項

雖然 OTF 字型可以在大多數現代瀏覽器中使用，但考慮支援更廣泛的使用者至關重要。使用 WOFF 和 TTF 字型類型提供了更好的可訪問性：

• WOFF: 與主要桌面瀏覽器相容。
• TTF: 舊版的後備Safari、Android 和 iOS 瀏覽器。

為了實現無縫相容性，請將您的 .otf 字體轉換為使用 Transfonter 等線上工具的 WOFF 和 TTF 格式。

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

最大瀏覽器支援

要滿足幾乎所有可用的瀏覽器，請考慮包含其他字型類型：

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

透過利用這些技術，您可以確保 OTF 字型在所有主流 Web 瀏覽器上成功嵌入和顯示。