@font-face 正在上传不能应用于我的项目的字体

Question

我正在通过@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 检查器 referencing the 'aquaFont' 的屏幕截图，但显示的是默认的 Serif 字体。

Answer 1

只需从 src 中删除 format('ttf') 即可。下面是修改后的代码。

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

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

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

Answer 2

只需使用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>

@font-face 正在上传不能应用于我的项目的字体

@font-face is uploading fonts that can not be applied to my project

html

css

fonts

truetype

font-face