时间戳

首页 > 解决方案 > 如何根据媒体查询有效地使用不同的字体权重

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

问题描述

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

标签： csshtmlmedia-queriesgoogle-fonts

解决方案

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

推荐阅读