Блог

Главная - Вопросы по программированию - Масштабирование одной грани шрифта в CSS

Масштабирование одной грани шрифта в CSS

#css #fonts #webfonts

Вопрос:

Я пишу крошечный веб-сайт для книги, которая в настоящее время печатается, и хочу соответствовать слегка эксцентричному шрифту под названием Cronos Pro, который он использует для своих заголовков. В настоящее время я делаю это со следующим CSS:

 header, h1, h2, h3 {
   font-family: cronos-pro, sans-serif;
}

Cronos Pro поставляется с использованием нашей подписки Adobe Creative Cloud, и в соответствии с условиями их лицензии она должна быть загружена следующим образом:

 <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>

Это просто создает набор @font-face правил, определяющих шрифт, и все это прекрасно работает. Тем не менее, я чувствую, что должен сохранить резерв sans-serif на случай, если шрифт временно недоступен или для старого браузера, который его не поддерживает.

Однако Cronos Pro-это очень компактный шрифт. Если я знаю, что браузер использует его, я хочу, чтобы он отображался больше, как если бы я добавил font-size: 125% его в CSS. Но если браузер вернется к своему шрифту без засечек по умолчанию, я хочу, чтобы он был размером 100%.

Я думал, что смогу сделать это следующим образом, но Firefox сообщает мне, что это недопустимое значение свойства:

 font: cronos-pro 125%, sans-serif;

Есть ли хороший способ добиться этого, имея в виду @font-face , что правило находится вне моего контроля?

Комментарии:

1. Вы могли бы добавить несколько других резервных шрифтов, которые более сжаты, а затем имеют идеальный размер… font-family: cronos-pro, Tahoma, Arial, sans-serif; с без засечек вы не знаете, какой шрифт будет выбран, поэтому вы не можете придумать реалистичный размер.

2. Да, в реальном коде уже есть несколько более конкретных резервных вариантов, но все они похожи по размерам друг на друга и на шрифты без засечек по умолчанию в системах, которые я тестировал. Это шрифт Cronos-Pro, который особенно мал.

Ответ №1:

Вы можете использовать JavaScript для добавления таблицы стилей с вашим font-size: 125% тегом, если и когда Chronos Pro успешно загрузится:

 <script>
    {
        let font = "cronos-pro";
        
        let styleSheet = document.createElement('style');
        document.head.appendChild(styleSheet);

        document.fonts.ready.then(function () {
            if( document.fonts.check(`1em ${font}`) ){
                styleSheet.sheet.insertRule('header, h1, h2, h3 { font-size: 125%; }')
            }
        });
    }
</script>

Не уверен, что это «хороший способ» сделать это, но в крайнем случае он должен сработать. Я все еще немного новичок в веб — разработке.

Комментарии:

1. Спасибо. Это гениальное решение, которое работает, хотя я разделяю ваши сомнения относительно того, хорошее ли это решение. Давайте посмотрим, не придумает ли кто-нибудь более элегантное решение, прежде чем я приму это.

Метки: