Question

我正在尝试使用“ @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;}}

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

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

当屏幕尺寸减小到定义的800px以下（包括其他文本）时，网站上的所有其他元素都在正确更改，并且我在整个过程中反复清除了缓存，但无济于事。！important似乎也没有作用。

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

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

屏幕尺寸更改时，字体更改为继承的字体

1 个答案: