有没有一种方法可以使用JavaScript导入多个自定义字体？

Question

我试图展示一些我用作图标的自定义字体...但这是一个很长的列表，我不想逐个导入因为这需要花费很长时间并且难以维护。我从 API 获取字体列表，有没有办法使用 JavaScript 导入字体列表?

到目前为止我唯一能够做的就是使用纯 CSS 的 @font-face，但这意味着我需要逐个导入。

@font-face {
    font-family: 'Animal-1';
    src:  url('http://ggt-des.ibge.gov.br/styles/fontes/Animal-1.ttf');
    font-weight: normal;
    font-style: normal;
};

字体列表：

{"Animais-1.ttf": "http://ggt-des.br/styles/fontes/Animais-1.ttf",
"Animais-2.ttf": "http://ggt-des.br/styles/fontes/Animais-2.ttf",
"Animais.ttf": "http://ggt-des.br/styles/fontes/Animais.ttf",
"CPRM_Fontes.ttf": "http://ggt-des.br/styles/fontes/CPRM_Fontes.ttf",
"ESRI-Electric.ttf": "http://ggt-des.br/styles/fontes/ESRI-AMFM-Electric.ttf",
"ESRI-AMFM-Gas.ttf": "http://ggt-des.br/styles/fontes/ESRI-AMFM-Gas.ttf"}

- Aryel Alves

---

你是否可以访问字体的 SVG 版本？ - joseluismurillorios

@joseluismurillorios 只需要ttf格式... - Aryel Alves

请勿在Web上下文中使用ttf。将它们转换为woff2并使用它代替。首先，ttf是系统字体格式，因此您的字体可能会因为与Web字体无关的问题而被拒绝，但是其次，woff2（和woff，但在2019年几乎没有理由使用v1 woff格式）是一种无损压缩格式，这意味着您的网站将更快地加载给用户。 - Mike 'Pomax' Kamermans

@Mike'Pomax'Kamermans，你知道有哪些软件或服务可以进行指示转换吗？ - Aryel Alves

默认选择是https://github.com/google/woff2（取决于您的操作系统，可能只需简单执行“apt-get install woff2”或“brew install woff2”之类的命令）。 - Mike 'Pomax' Kamermans

Answer 1

您可以使用JavaScript将style元素附加到head中，例如以下代码片段。

演示

let head = document.head || document.getElementsByTagName('head')[0],
  style = document.createElement('style'),
  fonts = {
    "Animais-1.ttf": "http://ggt-des.br/styles/fontes/Animais-1.ttf",
    "Animais-2.ttf": "http://ggt-des.br/styles/fontes/Animais-2.ttf",
    "Animais.ttf": "http://ggt-des.br/styles/fontes/Animais.ttf",
    "CPRM_Fontes.ttf": "http://ggt-des.br/styles/fontes/CPRM_Fontes.ttf",
    "ESRI-Electric.ttf": "http://ggt-des.br/styles/fontes/ESRI-AMFM-Electric.ttf",
    "ESRI-AMFM-Gas.ttf": "http://ggt-des.br/styles/fontes/ESRI-AMFM-Gas.ttf"
  };

head.appendChild(style);

style.type = 'text/css';

let css = Object.entries(fonts).map(v => `@font-face {
    font-family: "${v[0].split('.')[0]}";
    src:  url(${v[1]});
    font-weight: normal;
    font-style: normal;
}`).join('');

if (style.styleSheet) {
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

.one {
  font-family: "Animais-1";
}

.two {
  font-family: "Animais-2";
}

.three {
  font-family: "Animais";
}

.four {
  font-family: "CPRM_Fontes";
}

.five {
  font-family: "ESRI-Electric";
}

.six {
  font-family: "ESRI-AMFM-Gas";
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>

---

你可以使用 SASS 来使用 mixin，但需要创建 .scss 文件，而不是 .css。

1. 在 .scss 文件中，需要创建 @mixin，它类似于函数。

2. 然后，需要使用 @include 调用该 mixin 并传递参数，这类似于调用函数。

MIXIN 示例

@mixin font-face($name, $path, $weight: null, $style: null){
    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $path;
    }
}
@include font-face("Animais-2", "http://ggt-des.br/styles/fontes/Animais-1.ttf", 'normal', 'normal');
@include font-face("Animais-2", "http://ggt-des.br/styles/fontes/Animais-2.ttf", 'normal', 'normal');
@include font-face("Animais", "http://ggt-des.br/styles/fontes/Animais.ttf", 'normal', normal);
@include font-face("CPRM_Fontes", "http://ggt-des.br/styles/fontes/CPRM_Fontes.ttf", 'normal', 'normal');
@include font-face("ESRI-Electric", "http://ggt-des.br/styles/fontes/ESRI-Electric.ttf", 'normal', 'normal');
@include font-face("ESRI-AMFM-Gas", "http://ggt-des.br/styles/fontes/ESRI-AMFM-Gas.ttf", 'normal', 'normal');

- Narendra Jadhav