为什么 CSS 不显示已安装的字体？

Question

我在 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>

请帮忙！

Answer 1

您是否尝试过清除缓存？通常，当我无法加载图像和其他内容时，我会清除缓存。另外，您的类 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... */
}

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

希望对您有所帮助！

Answer 2

你说 results.php 中的 HTML 看起来不错。恐怕不行。

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

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

我想你想使用 class 来设置各个地方的字体。

<!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 元素更改为具有 class 而不是 id，就像我们对 span 所做的那样。

为什么 CSS 不显示已安装的字体？

Why does CSS not show an installed font?

html

css

fonts