異なる言語にwebfontを含める方法

Question

私のウェブサイトのフォントを変更する必要があります。 Webfontファイル（.eot、woff、ttf、woff2、svgファイル）をWebサイトに含める必要があります。しかし、同じフォントのフォントファイルは3セットあります。英語、スペイン語、ポルトガル語をそれぞれ1つずつ設定します。私は@ font-faceを使って英語のためにしました。しかし、私は他の2つの言語のためにどのようにそれを行うのですか？お知らせ下さい。ありがとう

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

は.....

その他の簡単な方法、