时间戳

首页 > 解决方案 > @font-face 正在上传无法应用于我的项目的字体

html - @font-face 正在上传无法应用于我的项目的字体

问题描述

我正在通过@font-face 加载几种字体。

根据检查员的说法，这些字体正在加载到我的文本中，但是字体实际上并没有改变。

我已经通过 fontsquirrel.com 运行了这些字体并收到了相同的结果。

目前，我的脚本如下：

<style>
    @font-face {
        font-family: 'aquaFont';
        src: url('/fonts/aqua.ttf') format('ttf');
    }

    .page-header h1{
        font-family: 'aquaFont' !important;
    }
</style>

<div class="page-header">
    <h1><?php the_field('floor_plan_title'); ?></h1>
</div>

Chrome 和 Firefox 检查器会识别所选字体，但不会相应地更新文本。

我已经通过这个脚本运行了 7 种不同的 .otf 和 .ttf 字体，并且对它们中的每一个都体验到了相同的结果。

此处附加的是 chrome 检查器的屏幕截图，它引用了“aquaFont”，但显示了默认的 Serif 字体。

标签： htmlcssfontsfont-facetruetype

解决方案

只需使用https://transfonter.org/将.ttf字体转换为所有字体类型，以便字体支持所有浏览器。

 <style>
    @font-face {
        font-family: 'aquaFont';
        src: url('/fonts/aqua.ttf')  format("ttf");
        src: url('/fonts/aqua.woff') format("woff");
        src: url('/fonts/aqua.otf') format("otf");
        src: url('/fonts/aqua.eot') format("eot");
    }

    .page-header h1{
        font-family: 'aquaFont' !important;
    }
</style>

<div class="page-header">
    <h1><?php the_field('floor_plan_title'); ?></h1>
</div>

推荐阅读