Почему шрифт Google «Roboto» по-прежнему выглядит толстым после размещения веса 100?

<head> 
    <title>Privacy Policy</title> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 



<h2>Brief summary of our Privacy Policy</h2> 

    <div class="text"> 

     <p>We value your privacy.</p> 

      <h3>General</h3>

CSSПочему шрифт Google «Roboto» по-прежнему выглядит толстым после размещения веса 100?

body 
{ 
    background-color: black; 
    font-family: 'Roboto',sans-serif; 
    color: white; 
} 

h1 { 
    color: #fffffe; 
    font-size: 20pt; 
    letter-spacing: 0.2pt; 
    font-weight: 400; 
} 

h2 { 
    color: #fffffe; 
    font-size: 40pt; 
    text-align: center; 
    font-weight: 100; 
}

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

источник

2017-02-22 Giedru

По умолчанию Google Web Fonts загружать только вес 400.

Вы должны указать в URL в другие веса, которые вы хотите, добавляя их после двоеточия.

Так что для вашего случая URL-адрес должен быть:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">

Источник: https://developers.google.com/fonts/docs/getting_started

источник

2017-02-22 16:53:10 Yousphere

Вы должны выбрать вес 100 шрифта.

h2 { 
 
    color: #fffffe; 
 
    font-size: 40pt; 
 
    text-align: center; 
 
    font-weight: 100; 
 
} 
 

 
h1 { 
 
    color: #fffffe; 
 
    font-size: 20pt; 
 
    letter-spacing: 0.2pt; 
 
    font-weight: 400; 
 
} 
 

 
body { 
 
    background-color: black; 
 
    font-family: 'Roboto', sans-serif; 
 
    color: white; 
 
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet"> 
 
<h1>this is an h1</h1> 
 
<h2>Brief summary of our Privacy Policy</h2>

источник

2017-02-22 16:50:24

Время, чтобы узнать кое-что о том, как шрифты и CSS работают вместе.

Отдельные файлы шрифтов (так, на современных компьютерах это отдельные ttf и otf файлов для Интернета, который также включает в себя woff и woff2 файлы) кодируют одиночный вес. Шрифт, подобный «Roboto-Regular», содержит только один вес глифов, поэтому, если CSS загружает только этот шрифт, вы можете изменить font-weight столько, сколько хотите, но ничего не сделаете, потому что вы не сказали движку CSS, что делать. Он просто использует один и тот же шрифт.

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

@font-face { 
    font-family: Roboto; 
    font-weight: normal; 
    font-style: normal; 
    src: url(roboto-regular.woff) format('WOFF') 
} 

@font-face { 
    font-family: Roboto; 
    font-weight: 300; 
    font-style: normal; 
    src: url(roboto-light.woff) format('WOFF') 
} 

@font-face { 
    font-family: Roboto; 
    font-weight: 200; 
    font-style: normal; 
    src: url(roboto-thin.woff) format('WOFF') 
} 

@font-face { 
    font-family: Roboto; 
    font-weight: 100; 
    font-style: normal; 
    src: url(roboto-ultra-thin.woff) format('WOFF') 
} 

etc.

И из-за того, CSS двигатель вашего браузера теперь знает что, почему вы говорите font-weight: 100, для этого нужно вместо шрифта robot-ultra-thin вместо обычного шрифта.

«Но почему это работает на такие вещи, как Times?»

Хороший вопрос: поскольку системные шрифты уже представляют собой большие коллекции различных файлов шрифтов. Обратите внимание, что когда вы используете CSS, вы запрашиваете font-family. «Семейная» часть важна: вы не запрашиваете отдельные шрифты, вы просите о целом семействе шрифтов, и по умолчанию из этой семьи вы просите стиль: нормальный, вес: нормальная версия. Ваша ОС идеально подходит для поиска нужного файла с одним шрифтом, который будет использоваться для вашего браузера, для этой цели, и поэтому, когда вы, как и для font-family: Times, загрузите ваш бобер Times-regular.ttf или что-то подобное.

Но если в семействе шрифтов не так много весов, как есть веса CSS, то никакое количество слов «weight: 100» не собирается создавать семейство шрифтов без ультратонкого шрифта, выглядящего ультратонким. Если ресурс шрифта не существует (либо потому, что он буквально не существует, либо потому, что вы забыли преподавать CSS, какой файл шрифта вам нужен для веса: 100), результат не определен, хотя и предсказуем (браузер будет в конечном итоге используя самый близкий соответствующий ему шрифт, знает), и вы не должны использовать CSS с неопределенным поведением. Вы на крючке, чтобы убедиться, что он определен =)

источник

2017-02-22 21:21:23

Почему шрифт Google «Roboto» по-прежнему выглядит толстым после размещения веса 100?

ответ

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