Google шрифт локально с разными весами, но с тем же именем - PullRequest
Новая
       58

Google шрифт локально с разными весами, но с тем же именем

2 голосов
/ 12 апреля 2019

Вот моя проблема:

Чтобы улучшить оценку SPEED в Google Speed ​​Insight, мне пришлось переключиться с шрифтов Google, блокирующих отображение, на загруженные локально шрифты Google.

Покахорошо, за исключением того, что у меня ОГРОМНАЯ проблема.

До того, как я загружал свои шрифты таким образом: 

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300|Ubuntu+Condensed|Ubuntu:300,700" rel="stylesheet">

И в моей огромной таблице стилей я просто вызывал их, например, как обычно: 

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

Но теперь, поскольку мне пришлось загрузить их, чтобы избежать красного флага, блокирующего рендеринг, я вызываю их следующим образом: 

@font-face {
    font-family: "Opens Sans";
    src: url("/fonts/OpenSans-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Opens Sans";
    src: url("/fonts/OpenSans-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Opens Sans";
    src: url("/fonts/OpenSans-Bold.ttf");
    font-weight: 600;
}
@font-face {
    font-family: "Opens Sans";
    src: url("/fonts/OpenSans-ExtraBold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Opens Sans Condensed";
    src: url("/fonts/OpenSansCondensed-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Ubuntu Condensed";
    src: url("/fonts/UbuntuCondensed-Regular.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Ubuntu";
    src: url("/fonts/Ubuntu-Regular.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "Ubuntu";
    src: url("/fonts/Ubuntu-Bold.ttf");
    font-weight: 700;
}

И здесь вы можетесмотри мою ПРОБЛЕМУ.

Я называю разные шрифты с одинаковыми именами, но они имеют разный вес.Очевидно, я могу назвать их с другим именем, например, «Ubuntu Bold», но тогда мне придется изменить всю таблицу стилей, например, теперь я должен объявить: 

body {
      font-family: 'Open Sans Normal', sans-serif;
      // font-weight: 400; //
}
p {
      font-family: 'Open Sans Bold', sans-serif;
      // font-weight: 700; //
}

По сути, не болееfont-weight, только разные имена семейства шрифтов для определения веса.

Есть ли какое-нибудь решение моей проблемы?

1 Ответ

1 голос
/ 12 апреля 2019

Даже если файлы шрифтов различны, вам не нужно устанавливать разные font-family для каждого варианта шрифта.Вы можете просто установить один font-family и указать различные варианты в различных свойствах @font-face.

Вы должны определить каждый @font-face с тем же именем font-family, например: 

@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Italic.ttf");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: 'Opens Sans';
    src: url("/fonts/OpenSans-Bold.ttf");
    font-style: normal;
    font-weight: 600;
}

Обратите внимание, что каждый отдельный файл шрифта имеет отдельный @font-face с различными свойствами, которые соответствуют конкретному файлу шрифта, но имеют одинаковый font-family.Затем вы можете использовать шрифт в вашем CSS следующим образом: 

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.bold {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
.italic {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

Другие свойства в ваших классах CSS (font-weight, font-style и т. Д.) Будут определять, какой @font-face используется.

...