Как включить веб-шрифт для разных языков

Мне нужно изменить шрифт для моего сайта. У меня есть файлы веб-шрифтов (файлы .eot, woff, ttf, woff2, svg), которые мне нужно включить на веб-сайт. Но у меня есть три набора файлов шрифтов для одного и того же шрифта. По одному набору для английского, испанского и португальского языков. Я сделал это для английского языка, используя @font-face. Но как мне сделать это для двух других языков? Пожалуйста, порекомендуйте. Спасибо


css webfonts font-face multiple-languages
person C V    schedule 31.01.2017    source источник
comment
Возможный дубликат Стилизовать текст для использования разных шрифтов для разных языков?< /а>   -  person Ason    schedule 31.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я знаю, что к этому нет короткого пути. Вам нужно добавить правила шрифта для каждого из этих наборов файлов. Что-то, что может уменьшить ваши усилия, — это использовать переменные SASS, как показано ниже. («веб-шрифт» относится к шрифту, который вы решили использовать).

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

.....продолжайте аналогичным образом для различных начертаний и стилей шрифта

Любой другой простой способ, пожалуйста, не стесняйтесь публиковать. Спасибо

person C V    schedule 08.02.2017