如何使用 .ttf 包含自定义字体并确保跨浏览器兼容性？

包含使用 .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>

此代码假设您有 .eot、.woff、.适用于您的网络字体的 ttf 和 SVG 格式。像 Font Squirrel 或 Transfonter 这样的 Web 字体生成器可以自动执行此过程。

现代方法：

现代浏览器更喜欢 .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 技巧：使用 @font-face：https://css-tricks.com/snippets/css/using -font-face/
• 我可以使用字体吗：https://caniuse.com/fontface

以上是如何使用 .ttf 包含自定义字体并确保跨浏览器兼容性？的详细内容。更多信息请关注PHP中文网其他相关文章！