Робот "Тонкий" с Google Fonts - PullRequest
Новая
       35

Робот "Тонкий" с Google Fonts

1 голос
/ 16 февраля 2020

Поэтому я пытаюсь заставить Roboto Thin работать в моих CSS через Google Fonts 

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bold&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:thin&display=swap" rel="stylesheet">

Я могу заставить обычный Roboto работать нормально, но не тогда, когда я пытаюсь указать тонкий вес вот так: 

body {
    font: 16px/21px Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
    font-weight: thin;
}

Это просто придает мне обычный вес ... Кто-нибудь может увидеть, что я делаю неправильно?

Ответы [ 2 ]

2 голосов
/ 16 февраля 2020

thin не является допустимым ключевым словом для font-weight. Согласно Google Fonts (когда вы выбираете «Roboto», а затем смотрите «настроить» список весов), Thin соответствует весу 100

1 голос
/ 16 февраля 2020

Если вы посмотрите на источник шрифта, перейдя по ссылке в CSS, вы увидите, что легкий шрифт имеет вес 100, поэтому вы можете просто сделать это: 

body{
    font-family: 'Roboto', sans-serif;
}

.normal{
  font-weight: 400;
}

.light{
  font-weight: 100;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet"> 
<!-- 100 is light, 400 is normal -->

<p class="normal">Lorem ipsum</p>
<p class="light">Lorem ipsum</p>

Вы можете получить ссылку, выбрав шрифт в Google Fonts, нажав на имя шрифта в правом нижнем углу, перейдя к настройке и отметив все Вес шрифта коробки вам нужно. Затем go вернитесь, чтобы встроить и скопировать ссылку. Не просто используйте вес - импортируйте ссылку тоже, иначе у вас возникнут проблемы с масштабированием шрифта и интервалом на Firefox в Ubuntu.

...