为什么我的自定义 TrueType 字体 (.ttf) 不能在 CSS 中工作？

在 CSS 中使用自定义字体：综合指南

使用独特字体设计网页样式可以增强用户体验并增添个性。然而，合并自定义字体也带来了其自身的挑战。在 CSS 中使用 TrueType 字体 (.ttf) 文件时会遇到一个常见问题。

问题：

用户在其 CSS 代码中包含 .ttf 文件，但所需的字体更改未应用于页面。代码如下所示：

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

分析：

对于浏览器显示自定义字体，为它们提供广泛支持的多种文件格式非常重要。仅依靠 .ttf 文件可能不足以实现跨浏览器兼容性。

解决方案：

为了确保最佳的字体支持，最佳实践是使用组合字体格式：

<code class="css">@font-face {
    font-family: 'MyWebFont';
    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 */
}</code>

这种全面的方法为各种旧版和现代浏览器提供支持。为了简化该过程，用户可以使用 Font Squirrel 或 Transfonter 等网络字体生成器。

现代浏览器，例如 Chrome 6 、 Firefox 3.6 和 IE 9 ，优先考虑 .woff 字体格式。因此，针对这些浏览器的更简洁的解决方案可能是：

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  </code>

其他资源：

• CSS 技巧：https://css-tricks。 com/snippets/css/using-font-face/
• 我可以使用：https://caniuse.com/?search=fontface

以上是为什么我的自定义 TrueType 字体 (.ttf) 不能在 CSS 中工作？的详细内容。更多信息请关注PHP中文网其他相关文章！