Как указать веб-безопасный пользовательский шрифт по умолчанию, если шрифт Google недоступен

Ради дизайна я люблю использовать очень большие шрифты в заголовках (около 70-85 пикселей). Чтобы не перегружать страницу, мне нужен очень тонкий шрифт. Я нашел Poiret One в Google Fonts, и он относится к семейству курсивных. Это очень тонкий, очень элегантный шрифт, но по умолчанию в семействе скорописей используется шрифт comic sans, который как раз наоборот — очень неуклюжий, жирный и непривлекательный в больших заголовках. В моем файле css у меня есть:

h1 {
  font-family: 'Poiret One', cursive;
  font-weight: 100;
  font-size: 85px;
  color: #99ccff;
}

Я хотел бы добавить courier new в качестве пользовательского шрифта по умолчанию, так как это самый тонкий из веб-безопасных шрифтов, и добавить следующие атрибуты, чтобы расстояние между символами было похоже на Poiret One, чтобы я не переполнял столбцы начальной загрузки:

font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;

Какой css я могу использовать, чтобы сообщить браузеру, что если Poiret One не может быть просмотрен пользователем, используйте courier new с модификациями шрифта, как указано выше?

С нетерпением жду решения. Спасибо!


html fonts css twitter-bootstrap-3 typography
person Wendy    schedule 16.06.2015    source источник
comment
Вероятно, вам нужно проверить, успешно ли загружается шрифт с помощью JavaScript, чтобы применить альтернативный класс в качестве запасного варианта для элемента. Взгляните на: stackoverflow.com/questions/12312323/   -  person Hashem Qolami    schedule 16.06.2015
comment
Шрифт Poiret One загружается нормально, за исключением тех, у кого не включены сценарии или по какой-то причине они не могут получить доступ к шрифтам Google. Затем загружается комикс, и он выглядит ужасно, поэтому я хочу изменить значение по умолчанию на courier new с модификациями, которые я перечислил выше.   -  person Wendy    schedule 17.06.2015

Ответы (1)


arrow_upward
2
arrow_downward

Используйте font-family следующим образом:

font-family: 'Poiret One', cursive, 'Courier New';

Когда браузер не находит шрифт Poiret One или cursive, он будет использовать шрифт Courier New.

person Bhojendra Rauniyar    schedule 16.06.2015
comment
Не лучше ли поставить 'Courier New' перед cursive? ОП, похоже, не хочет писать курсивом перед 'Courier New' - person marcellothearcane; 27.06.2017