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

.....对于各种字体权重和样式

，类似地继续

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

如何将webfont包含在不同的语言中

1 个答案: