为什么上传网站后谷歌字体不起作用？答案

【问题标题】：Why google fonts not working after uploading site?为什么上传网站后谷歌字体不起作用？
【发布时间】：2020-11-27 19:15:45
【问题描述】：

只有当我从计算机打开索引文件时，我网站上的 Google 字体才能按预期工作。当我在互联网上上传时，字体无法正常工作（请参阅下面的图片和代码）。谢谢您的帮助！ :)

网址：http://veganrecipes.clanweb.eu/

fonts working

fonts does not work

html代码：

<head>
<title>Krajčírstvo Jana Fürhofferová</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Dancing+Script&display=swap" rel="stylesheet">

css代码：

    .navbar-brand {
    font-size: 4vw;
    text-align: center;
    font-family: 'Dancing Script', cursive;
}

.nav-item {
    font-size: 25px;
    font-family: 'Comfortaa', cursive;
    padding: 15px;
}

.heading {
    font-size: 30px;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    font-weight: bold;
}

p {
    font-size: 20px;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    line-height: 160%;
}

.text {
    line-height: 200%;
}

【问题讨论】：

如果字体正在加载，请检查开发者控制台中的网络选项卡。
或者这种字体不能与“čakať”、“hádzať”等“标点符号”一起使用

标签： html css google-fonts

【解决方案1】：

在你的 head 部分添加字符集元标记

<meta charset="utf-8">

来自 w3：

使用 HTTP 标头的一个优点是用户代理可以在 HTTP 标头中发送字符编码信息时更快地找到它。

当 HTTP 标头信息与除字节顺序标记之外的文档内声明冲突时，它具有最高优先级。对数据进行转码（即转换为不同编码）的中间服务器可以利用这一点来更改文档的编码，然后再将其发送到只能识别少数编码的小型设备。目前尚不清楚这种转码是否被广泛使用。如果是这样，并且正在将内容转换为非 UTF-8 编码，则存在很高的数据丢失风险，因此不是好的做法。

另一方面，也有一些潜在的缺点：

内容作者可能很难更改服务器上静态文件的编码信息，尤其是在与 ISP 打交道时。作者需要了解和访问服务器设置。

服务器设置可能由于某种原因与文档不同步。例如，如果您依赖服务器默认值，并且该默认值已更改，则可能会发生这种情况。这是一种非常糟糕的情况，因为 HTTP 信息的优先级高于文档内声明可能会导致文档变得不可读。

如果不是从服务器读取静态和动态文档，则它们都存在潜在问题；例如，如果它们保存到 CD 或硬盘等位置。在这些情况下，来自 HTTP 标头的任何编码信息都不可用。

同样，如果字符编码仅在 HTTP 标头中声明，则该信息不再可用于文件在编辑过程中，或者当它们被诸如 XSLT 或脚本之类的东西处理时，或者当它们被发送用于翻译等时.

【讨论】：

【解决方案2】：

一开始你可以尝试设置元标记：

<meta charset="UTF-8">

【讨论】：

【解决方案3】：

在 HTML 文档中描述元数据：charset="UTF-8"

【讨论】：