为什么Chrome浏览器不显示我声明的@font-face自定义字体？

数据老陈

2026-9-25

错误原因

最核心的问题是你将<style>标签放在了</html>闭合标签之外，浏览器解析HTML文档时，会自动忽略<html>根标签外部的所有内容，你写的@font-face规则根本没有被浏览器识别，自然无法应用到页面元素上，浏览器就会降级到默认的Times字体渲染。
额外的HTML结构问题：你的代码缺少标准的<head>、<body>层级，样式标签按规范必须放在<head>标签内，页面渲染内容要放在<body>标签内。

修复后的正确代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        @font-face {
          font-family: OpenSans-Regular;
          font-style: normal;
          font-weight: 400;
          font-stretch: 100%;
          font-display: swap;
          src: url(https://fonts.gstatic.com/s/opensans/v27/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
        }
    </style>
</head>
<body>
    <div style='font-family: OpenSans-Regular;'>
        Hello World!
    </div>
</body>
</html>

其他可排查点

如果调整结构后依然存在问题，可以检查以下细节：