javascript - 使用 javascript 导入多个自定义字体有相同的方法吗？

Question

我正在尝试展示一些我用作图标的自定义字体...但它是一个很大的列表，我不想一个一个地导入，因为它会花费很长时间并且很难维护。我从 API 获取字体列表，使用 javascript 导入字体列表的方法是否相同？

到目前为止，我唯一能做的就是使用 @font-face 和纯 css，但这样我就需要一个一个地导入。

@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"}

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>

---

您可以使用其他方式 mixin使用 SASS 但为此您需要创建 .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');