Назначьте стандартный (безопасный веб-шрифт), используя для печати @ font-face - PullRequest
Новая
       8

Назначьте стандартный (безопасный веб-шрифт), используя для печати @ font-face

0 голосов
/ 05 февраля 2019

В настоящее время в моей стандартной таблице стилей у меня есть: 

@font-face {
    font-family: myFancyFont;
    src: url('myFancyFont.otf');
}

И я использую это в других объявлениях CSS, таких как: 

.someClass {
    font-size: 18px;
    font-family: myFancyFont;
}

Это все работает хорошо, пока кто-то не перейдет краспечатайте страницу, и в этот момент все, что с помощью myFancyFont будет напечатано довольно уродливым шрифтом.

  • Экранная версия enter image description here
  • Печатная версия enter image description here

Обратите внимание, что шрифт выглядит двойным и размытым.Мой файл print.css меняет цвет фона с синего на серый.

Могу ли я переопределить myFancyFont в моем файле print.css на стандартный веб-безопасный шрифт (например, Verdana), чтобы печать выглядела более нормально?

Я предполагаю, что все еще может быть проблема, если я просто сделаю: 

@font-face {
    font-family: myFancyFont;
    src: url('verdana.otf');  /*or a real version of the verdana font file*/
}

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Могу ли я переопределить myFancyFont в моем файле print.css на стандартный веб-безопасный шрифт (например, Verdana), чтобы печать выглядела более нормально?

Да, в вашей печатитаблицу стилей, вы можете переопределить ваше семейство шрифтов, чтобы использовать предустановленный Verdana, например: 

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

Все ссылки на myFancyFont в вашей стандартной таблице стилей, при условии, что они не ограничены @media screen, будут автоматически использовать Verdanaв печати. ​​

Вам необходимо убедиться, что ваша таблица стилей печати связана с вашей стандартной таблицей стилей в HTML-коде, чтобы это правило @font-face заменяло ваше стандартное.

Обратите внимание, что "Веб-безопасный »не обязательно означает« разборчивый в постраничных носителях », хотя, как правило, большинство веб-безопасных шрифтов делают печатают довольно разборчиво.

0 голосов
/ 05 февраля 2019

Я бы просто использовал @media print медиазапрос с Verdana в качестве стандартного шрифта, например: 

@media print {
  * {
    font-familiy: Verdana, sans-serif;
  }
}

Плюс, если у вас есть другие, более конкретные правила CSS, в которых вы определяете свой FancyFont, выпришлось бы включить их тоже в этот медиа-запрос (изменено на Verdana) или использовать !important в приведенном выше правиле.

...