网页不会呈现指定的字体

Posted 2023-03-21

【中文标题】网页不会呈现指定的字体

【英文标题】：Webpage will not render specified font

【发布时间】：2019-12-21 11:55:56

【问题描述】：

我的网页出现问题，因为浏览器不断呈现自己的字体 Open Sans， 下面是 chrome 检查器显示的内容：

    font-family: 'Open Sans', 'sans-serif';

浏览器不断渲染自己的字体 Open Sans，下面是 chrome 检查器显示的内容。我在外部样式表中指定渲染 Roboto：

  body 
      height:100%;
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-color: #FFF;
  

我正在按照 google 字体文档的要求导入字体

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

检查页面是否静止：

font-family: 'Open Sans', 'sans-serif';

在不同的浏览器中出现同样的问题。我已经清除了缓存，尝试了不同的字体，例如“Arial”，尝试了不同的浏览器。

【参考方案1】：

欢迎来到堆栈溢出

您应该尝试将 Roboto 字体的 @import 放入您的 CSS 文件中 并从您的 html 中删除链接版本 _

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

希望这能解决您的问题

【参考方案2】：

确保具有 Roboto 字体的 CSS 文件是浏览器中最后一个呈现的文件。或者试试这个：

html, body  font-family: 'Roboto', sans-serif; !important;