Как эффективно использовать разные веса шрифта в зависимости от медиа-запросов - PullRequest
Новая
       8

Как эффективно использовать разные веса шрифта в зависимости от медиа-запросов

0 голосов
/ 08 декабря 2018

Google font-weight не меняется при изменении размера экрана.Это правильный способ изменения веса шрифта на маленьком экране с помощью @import или есть другой способ? 

h1{
 font-family: 'Montserrat',sans-serif;
 font-size: 50px;
    }
@media only screen and (max-width: 480px)
{
@import url('https://fonts.googleapis.com/css?family=Montserrat:600');
  h1{
  font-size:20px;
  font-weight:900;
   } }
<!-- Google Font in Html-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100" rel="stylesheet">
    <h1> This is a text </h1>

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Напишите google font @import url ('https://fonts.googleapis.com/css?family=Montserrat:600'); вверху файла css, он не нужен в этом разделе, а затем попробуйте. Если возникает такая же проблема, сделайте свойство важным. Как Font-weight: 900! Важно

0 голосов
/ 06 января 2019

Вместо правила css @imports, которое, очевидно, не работает внутри правила css @media, вы можете использовать тег html link с атрибутом media.

Пример кода:

HTML:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:400" media="only screen and (min-width: 481px)">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:700" media="only screen and (max-width: 480px)">

CSS: 

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



@media only screen and (min-width: 481px) {
  h1 {
  font-weigth: 400;
}
}

@media only screen and (max-width: 480px) {
  h1 {
    font-weigth: 700;
  }
}

DEMO: https://codepen.io/quic5/pen/ebrmVg

...