Question

当屏幕尺寸更改时，

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>

Answer 1

您可以将html link标签与media属性一起使用，而不是css @imports规则在css @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;
  }
}

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

Answer 2

写谷歌字体 @import url（'https://fonts.googleapis.com/css?family=Montserrat:600'）;在css文件顶部不需要该部分，然后尝试。如果发生相同的问题，则使该属性重要。喜欢字体重量：900！重要

如何根据媒体查询有效使用不同的字体粗细

2 个答案: