为什么已安装的Poppins字体在result.php页面的CSS中不生效？

错误1：ID属性使用不规范 #

HTML中id属性的值不允许包含空格，你代码里写的<span id="font-custom extra-big">属于错误用法：

• 空格分隔多个值是class属性的用法，id只能定义单个唯一标识
• 你这里把font-custom和extra-big两个值写在id里，浏览器无法正确识别匹配CSS选择器

错误2：CSS选择器与HTML标签不匹配 #

你现有的CSS规则和result.php里的标签完全对应不上：

• CSS里针对span的选择器是span#font，但你result.php里的span用的标识是font-custom，完全不匹配
• CSS里的h1#font-custom只针对<h1>标签生效，对<span>标签无效

第一步：修改result.php代码 #

把错误的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>

第二步：修改styles.css的选择器，匹配span标签 #

h1#font-custom {
    font-family: "Poppins Black" !important; /* 保留原有h1的样式 */
}

/* 新增针对span的font-custom类选择器 */
span.font-custom {
    font-family: "Poppins SemiBold" !important;
}

如果修改后完全没有样式加载，可以把link标签的href改为站点绝对路径测试：
<link href="/area/styles.css" type="text/css" rel="stylesheet">

内容的提问来源于stack exchange，提问作者Kent23