为什么 CSS 不设置已安装字体的样式？答案

【问题标题】：Why does CSS not show an installed font?为什么 CSS 不设置已安装字体的样式？
【发布时间】：2021-12-17 13:41:24
【问题描述】：

我在 C:\xampp\htdocs\area 中有 3 个文件。它们是index.php、styles.css 和result.php。虽然 index.php 中的样式可以正常工作，但在 result.php 中，它不起作用。

在styles.css 中，<span> 和 <h1> 标记的样式为 Poppins Black 和 Medium：

h1#font-custom {
    font-family: "Poppins Black" !important; /* This h1 tag is styled. Note: the !important 
    property is used to override the custom-body class which styles the elements inside the 
    body to be Poppins Medium */
}

span#font {
    font-family: "Poppins SemiBold" !important; /* The span tag is also styled */
}

在 index.php 中，Poppins 工作正常，但在 result.php 中，它不显示。

在result.php 中，HTML 看起来不错：

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>

    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

  <body class="custom-body">
    <?php 
    $height = $_GET['height'];
    $width = $_GET['width'];
    $area = $height * $width;

    echo '<span id="font-custom extra-big">The area is ',$area,'.</span>';
    echo '<br><br>';
    echo '<span id="font-custom extra-big"><a href="index.php">Go back</a></span>';
    ?>
  </body>
</html>

请帮忙！

【问题讨论】：

字体在哪里存储/获取？
index.php 中是否有任何额外的 css 导入？还有span#font 不匹配<span id="font-custom extra-big">
您正在为 h1 使用字体自定义 id，但在 span 中应用。将 span id 更改为字体并尝试其工作与否
另外，不要对同一页面中的多个元素使用相同的 id。 CSS 确实有效。但这是一个不好的做法。改用类
@Skully，字体存放在C:\Users\Name\AppData\Local\Microsoft\Windows\Fonts\POPPINS-BLACK.ttf,POPPINS-SEMIBOLD.ttf

标签： html css fonts

【解决方案1】：

您说在 results.php 中的 HTML 看起来不错。恐怕没有。

尝试将生成的 HTML 放入验证器，它会告诉您不能有多个 font-custom id - id 必须是唯一的。

此外，您在 CSS 中设置 span#font，但在您的 HTML 中没有任何地方有 id 字体的跨度。

我想你想使用一个类来设置不同地方的字体。

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>

    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

  <body class="custom-body">
    <?php 
    $height = $_GET['height'];
    $width = $_GET['width'];
    $area = $height * $width;

    echo '<span class="font-custom extra-big">The area is ',$area,'.</span>';
    echo '<br><br>';
    echo '<span class="font-custom extra-big"><a href="index.php">Go back</a></span>';
    ?>
  </body>
</html>

在你的 CSS 中：

h1.font-custom {
    font-family: "Poppins Black" !important; /* This h1 tag is styled. Note: the !important 
    property is used to override the custom-body class which styles the elements inside the 
    body to be Poppins Medium */
}

span.font-custom {
    font-family: "Poppins SemiBold" !important; /* The span tag is also styled */
}

请记住将任何 h1 元素更改为具有类而不是 id，就像我们对 span 所做的那样。

【讨论】：

【解决方案2】：

您是否尝试过清除缓存？通常，当我无法加载图像和其他内容时，我会清除缓存。此外，您的课程font-custom-extra-big 似乎与span#font 不匹配。此外，如果您希望文件中的所有字体都默认为某种字体，您可以这样写：

body {
    font-family: "Poppins Black";
}

或

#font {
    font-family: "Poppins Black"; /* Note that I didn't put the element name because it is better practice not to do so... */
}

最后，您也可以尝试使用隐身模式，因为那样它基本上不会保存您的缓存。

希望这对您有所帮助！

【讨论】：