css - 如何根据媒体查询有效地使用不同的字体权重

Question

当屏幕大小改变时，谷歌字体粗细不会改变。这是使用@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>

Answer 1

写谷歌字体@import url(' https://fonts.googleapis.com/css?family=Montserrat:600 '); 在 css 文件的顶部，该部分不需要它，然后尝试。如果发生同样的问题，则使该属性变得重要。Like Font-weight:900 !important

Answer 2

除了显然在 css @media 规则中不起作用的 css @imports 规则，您可以使用带有 media 属性的 html 链接标签。

示例代码：

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;
  }
}

演示：https ://codepen.io/quic5/pen/ebrmVg