屏幕大小更改时字体更改为继承的字体答案

【问题标题】：Font Changing to Inherited Font on Screensize Change屏幕大小更改时字体更改为继承的字体
【发布时间】：2018-11-29 01:10:15
【问题描述】：

我正在尝试使用“@media only screen”制作一个简单的移动响应网站，但我的一个标题是恢复为继承的字体，而不是继续使用 CSS 定义的字体。

//HTML
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="squirrelcss.css"  type="text/css">
<link href="https://fonts.googleapis.com/css? 
family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
</head>

<body>
<h4> Short Title </h4>
</body>

//CSS
[class*="h4"]{
font-size: 5vw;
}

@media only screen and (min-width: 800px){
h4{
font-family: 'Pacifico', cursive;
font-size: 2vw;
color:#474644;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}}

在谷歌浏览器的检查模式下，它表示在较小的屏幕尺寸下，h4 正在从它的容器元素 col-8 继承它的字体。

.col-8{
font-family:'Open Sans', sans-serif;
}

当屏幕尺寸低于定义的 800 像素（包括其他文本）时，网站上的所有其他元素都会正确更改，并且我在整个过程中反复清除缓存无济于事。 !important 似乎也没有效果。

如何使 h4 元素继续显示“Pacifico”字体而不是继承的字体？

【问题讨论】：

你不能简单地添加一个'！重要吗？
!important 似乎根本不影响它

标签： html css

【解决方案1】：

如何使 h4 元素继续显示“Pacifico”字体而不是继承的字体？

只需将font-family: 'Pacifico', cursive; 设置为@media 语句之外的h4 元素。这样，无论您的页面大小如何，Pacifico（只要已加载）都将成为字体。

//HTML

  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <link rel="stylesheet" href="squirrelcss.css"  type="text/css">
    <link href="https://fonts.googleapis.com/css? 
    family=Open+Sans:400,400i,700|Pacifico" rel="stylesheet">
    </head>

    <body>
    <div class="col-8">
    <h4> Short Title </h4>
    </div>
    </body>

//CSS

 h4{
    font-family: 'Pacifico', cursive;
    }

    .col-8{
    font-family:'Open Sans', sans-serif;
    }

    @media only screen and (min-width: 800px){
    h4{
    font-size: 2vw;
    color:#474644;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;}}

【讨论】：