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

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

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

示例代码：

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

Answer 2

编写谷歌字体@导入url('https://fonts.googleapis.com/css?family=Montserrat:600'(；在css文件的顶部，该部分不需要它，然后尝试。如果出现同样的问题，则使属性变得重要。喜欢字体重量：900！重要