Как указать жирный вариант локального шрифта как запасной вариант в @ font-face? - PullRequest
Новая
       31

Как указать жирный вариант локального шрифта как запасной вариант в @ font-face?

0 голосов
/ 24 января 2019

Я бы хотел указать Arial Bold в качестве резервного шрифта в правиле @font-face.
Примерно так: 

@font-face {font-family: myCustomFont; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}

Но это не работает.По крайней мере, не в Chrome.Откат не Arial Bold или даже Arial Regular.

Вот пример с несколькими семействами шрифтов. 

@font-face {font-family: mustBeArialBold; src: url(http://unreachableHost/font1b.ttf), local(Arial Bold)}

@font-face {font-family: mustBeVerdanaBold; src: url(http://unreachableHost/font2b.ttf), local(Verdana Bold)}

@font-face {font-family: mustBeSegoeBold; src: url(http://unreachableHost/font3b.ttf), local(Segoe UI Bold)}

@font-face {font-family: mustBeTimesBold; src: url(http://unreachableHost/font4b.ttf), local(Times New Roman Bold)}
<body style="text-align: right">

<b style="font-family: Arial">This is Arial Bold</b> <br>
<c style="font-family: mustBeArialBold">This should be Arial Bold</c> <br><br>

<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<c style="font-family: mustBeVerdanaBold">This should be Verdana Bold</c> <br><br>

<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<c style="font-family: mustBeSegoeBold">This should be Segoe UI Bold</c> <br><br>

<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<c style="font-family: mustBeTimesBold">This should be Times New Roman Bold</c> <br><br>

Возможно ли это сделать?Как?

СЛЕДУЙТЕ ЗА:

Вот решение, предложенное @ Kerri 

@font-face {font-family: mustBeArial; src: local(Arial)}

@font-face {font-family: mustBeVerdana; src: local(Verdana)}

@font-face {font-family: mustBeSegoe; src:  local(Segoe UI)}

@font-face {font-family: mustBeTimes; src: local(Times New Roman)}
<body style="text-align: right">

<b style="font-family: Arial">This is Arial Bold</b> <br>
<b style="font-family: mustBeArial">This should be Arial Bold</b> <br><br>

<b style="font-family: Verdana">This is Verdana Bold</b> <br>
<b style="font-family: mustBeVerdana">This should be Verdana Bold</b> <br><br>

<b style="font-family: Segoe UI">This is Segoe UI Bold</b> <br>
<b style="font-family: mustBeSegoe">This should be Segoe UI Bold</b> <br><br>

<b style="font-family: Times New Roman">This is Times New Roman Bold</b> <br>
<b style="font-family: mustBeTimes">This should be Times New Roman Bold</b> <br><br>

Полученный текст выглядит как жирный текст, но он не похож на настоящий жирный шрифт.

1 Ответ

0 голосов
/ 25 января 2019

У меня нет шрифта с именем «Arial Bold» (хотя у меня есть «Arial Black»), поэтому функция local() не найдет подходящий шрифт для использования. По умолчанию на дисплее отображается Times New Roman, как и ожидалось.

Однако у меня есть Arial, поэтому любой вызов обычного старого Arial работает как положено.

В вашем коде 

<b style="font-family: Arial">This is Arial Bold</b>

вызывает шрифт Arial (который у меня есть), и, поскольку вы завернули его в теги b, он отображается жирным шрифтом. Пока все хорошо.

Но локально такого шрифта, как «Arial Bold», нет. 

<c style="font-family: mustBeArialBold">This should be Arial Bold</c>

не найдет шрифт под названием «Arial Bold» (потому что его нет на моем компьютере), и поскольку он находится в элементе c (что это?), А не в элементе b, он не будет отображаться жирным шрифтом. Если вы измените элементы c на элементы b, ваш текст будет выделен жирным шрифтом.

Несмотря на то, что вы можете попытаться добавить стили к вашим объявлениям @font-face, я склонен избегать стилизации шрифтов таким образом и вместо этого применять стили к классам. (Лицо шрифта - это не то же самое, что стиль шрифта, если только разработчик шрифта не намеренно встроил его в грань шрифта.) Здесь есть несколько хороших рекомендаций о том, как это работает. https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

...