如何包含不同语言的 webfont

Question

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

Answer 1

我知道这没有捷径可走。您需要为每组文件添加 font-face 规则。可以减少您的工作量的方法是使用 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-weights 和样式

以类似方式继续

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

$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;
}

.....对各种 font-weights 和样式

以类似方式继续

任何其他简单的方法，请随时post.Thanks

如何包含不同语言的 webfont

How to include webfont for different languages

css

multiple-languages

webfonts

font-face