Можно ли сделать font-weight: жирным шрифтом равным 500 вместо 700?

Я только что играл с Google Fonts и нашел шрифт Fira Sans. Это приятно, но мне не нравится стиль Bold (700), он слишком смел по моему вкусу. Однако, если я выбираю стиль Medium (500), браузер не использует его для чего-либо, установленного в font-weight: bold (например, <strong>). Вместо этого он использует какой-то искусственный смелый, который выглядит размытым.Можно ли сделать font-weight: жирным шрифтом равным 500 вместо 700?

Я могу пройти через мою таблицу стилей и установить каждое событие bold по номеру 500. Я мог бы также использовать Sass для установки переменной типа $bold-weight: 500;, которая помогает, если я решит позже изменить шрифт.

Это немного боли, хотя, плюс bold также по умолчанию для многих стилей браузера (например, <strong>, <th>), так что я должен убедиться, что я ловлю каждое возможное появление этого тоже. И могут быть внешние скрипты/стили, которые я не контролирую.

Есть ли способ сделать все случаи использования bold массой 500?

источник

2016-06-15 DisgruntledGoat

Если я правильно понял MDN, 'bold' в основном является псевдонимом для 700. Имея это в виду, вы действительно спрашиваете, можете ли вы сделать 700 равных 500, что не кажется вероятным. Я могу понять, почему вы спрашиваете, но я думаю, что вам лучше использовать переменную sass, поскольку это делает ваше намерение ясным. – Enrico

В крайнем случае, можете ли вы изменить шрифт? – Enrico

@Frits, почему вы удалили свой ответ? Это было не идеально, но это был не плохой ответ. – DisgruntledGoat

Да есть,

При выборе быстрого использования шрифта Google, вы получаете ссылку, чтобы включить в заголовок, откройте ссылку на ваш веб-браузер, и вы бы служил с файлом CSS с большим количеством

/* cyrillic-ext */ 

@font-face { 
    font-family: 'Roboto'; 
    font-style: italic; 
    font-weight: 400; 
    src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
}

Как вы можете видеть font-style: italic и font-weight: 400 связан с каким-то конкретным шрифтом (Roboto Курсив здесь) в @font-face тега, то есть всякий раз, когда вы используете font-weight: italic с font-weight: 400 (или normal), это относится к шрифт, описанный в атрибут src.

Теперь, если вы хотите, чтобы сделать все font-weight: bold в вашем использовании CSS это лицо шрифта, просто измените 400 в выше стиля шрифта для bold, и вы сделали.

Или вы можете создать дубликат полного шрифта @ font-face {..} и использовать в нем другой стиль шрифта.

Также вы можете использовать различные шрифты. Обязательно сохраняйте только один тег шрифта или шрифт-вес в шрифте @ font-face.

В этом примере здесь используются шрифты Google, вы можете использовать ту же технику для самостоятельных шрифтов.

источник

2017-02-19 08:09:41 Aryan

Можно ли сделать font-weight: жирным шрифтом равным 500 вместо 700?

ответ

Смежные вопросы