Как включить 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; 
} 

..... продолжать так же для различных шрифтов-весов и стилей

любой другой простой способ, пожалуйста, не стесняйтесь Post.Thanks