CSS свойство font-weight, отображающее только обычный вес - PullRequest
Новая
       6

CSS свойство font-weight, отображающее только обычный вес

0 голосов
/ 21 июня 2020

Я импортировал шрифты Montserrat (400,700 и 900) и Ubuntu (400) из шрифтов Google, но похоже, что работают только Montserrat 400 и Ubuntu 400, я не могу использовать Montserrat 700 или Montserrat 900. Буду признателен, если кто-нибудь может мне помочь, так как я уже некоторое время застрял на этом. Спасибо!! Вот мой код: 

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">

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

h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}

h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
<h1>Title</h1>
<h3>Title</h3>

Ответы [ 3 ]

1 голос
/ 21 июня 2020 
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">

Эта часть вашего кода должна быть в вашем HTML файле. Вот что я сделал и как это выглядит.

HTML: 

<html>
<link href="https://fonts.googleapis.com/css2? 
family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="style.css">
<h1>This is 900.</h1>
<h3>This is 700.</h3>
</head>
</html>

CSS: 

h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}

h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

В Chrome это выглядит так.

1 голос
/ 21 июня 2020

Неужели вы привязываете шрифт в своем css файле? Вы должны переместить его на свой html. 

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<p class="w-900">Hello 900</p>
<p class="w-700">Hello 700</p>

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

.w-900{
font-weight: 900;
}

.w-700{
font-weight: 700;
}

JSFiddle

В качестве альтернативы вы можете использовать @ font-face 

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

W3 Schools

Как импортировать шрифты

0 голосов
/ 21 июня 2020

Я так понимаю, это ошибка Chrome, что интересно, потому что я использую версию Chromium, и она отлично работает. Я бы рекомендовал использовать внутренний CSS (а не внешние таблицы стилей) под тегом <style> в вашем разделе <head> (где вы также должны ссылаться на <link> на шрифт) и добавить CSS, назначенный *, как показано ниже, к нему: 

* {
  -webkit-font-smoothing: antialiased;
}

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

h1 {
  font-size: 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.5;
}

h3 {
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
</head>

<body>
  <h1>Title</h1>
  <h3>Title</h3>
</body>

В качестве альтернативы есть также метод @import, который вы должны найти серым цветом в качестве правой опции в разделе «Встроить» ссылки на Google Fonts. Однако это должно быть вашим второстепенным вариантом, потому что, как отмечает здесь @igriorik , эти правила откладывают загрузку включенного ресурса до тех пор, пока файл не будет извлечен, что может привести к битым шрифтам на некоторых платформах.

Однако для этого вы должны добавить правила @import под тегом <style> и ссылаться на него в нужном элементе. В вашем случае (шрифтом Montserrat): 

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

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

h1 {
  font-size: 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.5;
}

h3 {
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
<h1>Title</h1>
<h3>Title</h3>

Сообщите мне, если это не сработает!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...