4.7 KiB

Raw Blame History

Hugo CSS

自定义字体

好的，您想在使用 Hugo 搭建的网站上使用自定义字体，服务器是 CentOS。这可以通过 CSS 的 @font-face 规则来实现。以下是详细步骤：

1. 准备字体文件：

您需要拥有字体文件，常见的格式包括：.ttf、.otf、.woff、.woff2。为了更好的兼容性，建议您至少拥有 .woff 和 .woff2 格式的字体文件。可以使用在线工具（例如：Font Squirrel 的 Webfont Generator）将其他格式的字体转换为 .woff 和 .woff2。
将字体文件上传到您的服务器。推荐放在 Hugo 项目的 static 目录下，这样 Hugo 会将它们复制到生成的网站的根目录下。例如，您可以创建一个 static/fonts 文件夹，并将字体文件放在其中。

2. 创建 CSS 文件：

在 Hugo 项目的 assets/scss 目录下（或者您主题指定的 CSS 目录），创建一个 CSS 文件，例如 _custom-fonts.scss（如果您使用 SCSS）。如果您不使用 SCSS，可以在 static/css 目录下创建 custom-fonts.css。
在该 CSS 文件中，使用 @font-face 规则定义您的自定义字体。

3. 使用 @font-face 规则：

以下是一个 @font-face 规则的示例：

@font-face {
  font-family: 'MyCustomFont'; /* 字体名称，随意命名 */
  src: url('/fonts/my-custom-font.woff2') format('woff2'), /* woff2 格式 */
       url('/fonts/my-custom-font.woff') format('woff');    /* woff 格式 */
  font-weight: normal; /* 字体粗细，例如 normal, bold, 400, 700 */
  font-style: normal;  /* 字体样式，例如 normal, italic */
  font-display: swap; /* 优化字体加载，防止 FOUT/FOIT */
}

font-family: 这是您为字体指定的名称，在其他 CSS 规则中将使用此名称来引用该字体。
src: 指定字体文件的路径。由于我们将字体文件放在 static 目录下，所以路径是相对于网站根目录的。如果您将字体放在其他地方，请根据实际路径进行修改。format() 用于指定字体文件的格式。
font-weight: 指定字体的粗细。
font-style: 指定字体的样式。
font-display: swap;: 这是一个重要的属性，用于优化字体加载。swap 值表示在字体加载完成之前，先使用后备字体显示文本，一旦自定义字体加载完成，则立即替换。这可以避免页面出现“内容闪烁”（FOUT）或“不可见文本闪烁”（FOIT）的问题。

4. 引入 CSS 文件：

如果您使用的是 SCSS，需要在您的主 SCSS 文件（通常是 assets/scss/main.scss 或类似名称的文件）中导入 _custom-fonts.scss 文件：

@import "custom-fonts";

如果您使用的是普通的 CSS，需要在 Hugo 的模板文件（例如 layouts/_default/baseof.html 或 layouts/index.html）的 <head> 标签中添加 <link> 标签来引入 custom-fonts.css 文件。

<link rel="stylesheet" href="{{ "/css/custom-fonts.css" | relURL }}">

5. 使用自定义字体：

现在，您可以在其他 CSS 规则中使用 font-family 属性来应用您的自定义字体：

body {
  font-family: 'MyCustomFont', sans-serif; /* 使用自定义字体，并指定一个后备字体 */
}

h1 {
  font-family: 'MyCustomFont', serif;
}

6. Hugo 构建和部署：

运行 hugo 命令来生成静态网站文件。
将生成的 public 目录下的文件部署到您的 CentOS 服务器。

CentOS 服务器配置（可选）：

如果您遇到字体文件无法加载的问题，可能是因为服务器没有正确配置 MIME 类型。您需要在 Web 服务器（例如 Apache 或 Nginx）的配置文件中添加以下 MIME 类型：

Apache：

在 Apache 的配置文件（例如 httpd.conf 或 .htaccess）中添加：

AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/font-woff .woff
AddType application/font-woff2 .woff2

Nginx：

在 Nginx 的配置文件（例如 nginx.conf）的 http 块中添加：

types {
    application/vnd.ms-fontobject eot;
    application/x-font-opentype otf;
    image/svg+xml svg;
    application/x-font-ttf ttf;
    application/font-woff woff;
    application/font-woff2 woff2;
}

修改配置文件后，需要重启 Web 服务器。

通过以上步骤，您就可以在 Hugo 网站上成功使用自定义字体了。如果仍然有问题，请检查以下几点：

字体文件路径是否正确。
CSS 文件是否正确引入。
服务器的 MIME 类型是否配置正确。
浏览器缓存，尝试清除浏览器缓存后重新访问。

希望这些信息对您有所帮助！

4.7 KiB Raw Blame History Unescape Escape

Hugo CSS

自定义字体

4.7 KiB

Raw Blame History