如何包含不同语言的 webfont

Question

我需要更改我网站的字体。我有需要包含在网站中的 webfont 文件（.eot、woff、ttf、woff2、svg 文件）。但是我有三组相同字体的字体文件。英语、西班牙语和葡萄牙语各一套。我使用@font-face 为英语做的。但是对于其他两种语言我该怎么做呢？请指教。谢谢

Answer 1

据我所知，没有捷径可走。您需要为每组文件添加字体规则。可以减少您的工作量的方法是使用如下 SASS 变量。 （'webfont' 是指您决定使用的字体）。

$font-prefix: 'webfont';

$font-reg: "#{$font-prefix}_reg-webfont";
$font-bold: "#{$font-prefix}_bld-webfont";
$font-black: "#{$font-prefix}_blk-webfont";
$font-light: "#{$font-prefix}_light-webfont";
$font-medium: "#{$font-prefix}_med-webfont";
$font-thin: "#{$font-prefix}_thin-webfont";

$font-reg-it: "#{$font-prefix}_reg_it-webfont";
$font-bold-it: "#{$font-prefix}_bld_it-webfont";
$font-black-it: "#{$font-prefix}_blk_it-webfont";
$font-light-it: "#{$font-prefix}_light_it-webfont";
$font-medium-it: "#{$font-prefix}_med_it-webfont";
$font-thin-it: "#{$font-prefix}_thin_it-webfont";


//Normal style fonts

@font-face {
  font-family: "Brandon";
  src: url("#{$font-reg}.eot");
  src:
    url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
    url("#{$font-reg}.woff2") format("woff2"),
    url("#{$font-reg}.woff") format("woff"),
    url("#{$font-reg}.ttf") format("truetype"),
    url("#{$font-reg}.svg#svgFontName") format("svg");
  font-weight: 400;
  font-style: normal;
}

.....继续类似地处理各种字体粗细和样式

==================西班牙语===============

$font-prefix: 'webfont';

$font-reg: "#{$font-prefix}_reg_es-webfont";
$font-bold: "#{$font-prefix}_bld_es-webfont";
$font-black: "#{$font-prefix}_blk_es-webfont";
$font-light: "#{$font-prefix}_light_es-webfont";
$font-medium: "#{$font-prefix}_med_es-webfont";
$font-thin: "#{$font-prefix}_thin_es-webfont";

$font-reg-it: "#{$font-prefix}_reg_it_es-webfont";
$font-bold-it: "#{$font-prefix}_bld_it_es-webfont";
$font-black-it: "#{$font-prefix}_blk_it_es-webfont";
$font-light-it: "#{$font-prefix}_light_it_es-webfont";
$font-medium-it: "#{$font-prefix}_med_it_es-webfont";
$font-thin-it: "#{$font-prefix}_thin_it_es-webfont";


//Normal style fonts

@font-face {
  font-family: "Brandon_es";
  src: url("#{$font-reg}.eot");
  src:
    url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
    url("#{$font-reg}.woff2") format("woff2"),
    url("#{$font-reg}.woff") format("woff"),
    url("#{$font-reg}.ttf") format("truetype"),
    url("#{$font-reg}.svg#svgFontName") format("svg");
  font-weight: 400;
  font-style: normal;
}

.....继续类似地处理各种字体粗细和样式

任何其他简单的方法，请随时发布。谢谢