112 lines
4.7 KiB
Markdown
112 lines
4.7 KiB
Markdown
# 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` 规则的示例：
|
||
|
||
```scss
|
||
@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` 文件：
|
||
|
||
```scss
|
||
@import "custom-fonts";
|
||
```
|
||
|
||
* 如果您使用的是普通的 CSS，需要在 Hugo 的模板文件（例如 `layouts/_default/baseof.html` 或 `layouts/index.html`）的 `<head>` 标签中添加 `<link>` 标签来引入 `custom-fonts.css` 文件。
|
||
|
||
```html
|
||
<link rel="stylesheet" href="{{ "/css/custom-fonts.css" | relURL }}">
|
||
```
|
||
|
||
**5. 使用自定义字体：**
|
||
|
||
现在，您可以在其他 CSS 规则中使用 `font-family` 属性来应用您的自定义字体：
|
||
|
||
```css
|
||
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 类型是否配置正确。
|
||
* 浏览器缓存，尝试清除浏览器缓存后重新访问。
|
||
|
||
希望这些信息对您有所帮助！
|