在网页开发中，使用精致的字体可以显著提高用户体验。
本文将总结如何在Django项目中使用著名的网页字体Poppins，以及如何在容器环境中可靠地使用系统默认字体sans-serif。

Django字体和Docker兼容性图

1. Poppins是什么字体？

Poppins是一种由Google Fonts提供的现代且精致的无衬线(Sans-serif)字体。
但是不支持韩文、日文和中文，因此必须将其他字体作为fallback设置。

2. 直接使用Google Fonts (CDN方式)

最简单的方法是在<head>中插入Google Fonts的链接。

<!-- base.html -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Noto+Sans+KR&family=Noto+Sans+JP&display=swap" rel="stylesheet">

body {
    font-family: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}
❗ 注意：在中国等某些国家可能会阻止访问Google Fonts

在这种情况下，字体无法加载，可能会出现字符破损或替换为系统默认字体。
为了解决这个问题，建议使用下面的本地安装方式。

3. 本地字体安装和使用方法

📁 项目目录结构示例

your_project/
├── static/
│   ├── fonts/
│   │   ├── poppins/
│   │   │   ├── Poppins-Regular.woff2
│   │   │   └── Poppins-Bold.woff2
│   │   └── noto/
│   │       ├── NotoSansKR-Regular.woff2
│   │       └── NotoSansJP-Regular.woff2
│   └── css/
│       └── fonts.css

🎨 fonts.css示例

/* Poppins */
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/poppins/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/poppins/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
}

/* Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('/static/fonts/noto/NotoSansKR-Regular.woff2') format('woff2');
}

/* Noto Sans JP */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/static/fonts/noto/NotoSansJP-Regular.woff2') format('woff2');
}

📌 CSS应用实例

:root {
  --font-default: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}

body {
  font-family: var(--font-default);
}

4. sans-serif需要单独安装吗？

✅ 一般的Ubuntu环境

  • sans-serif并不是字体名称，而是字体家族（字形系列，通用字体系列），实际是由系统中具有的无衬线系列的基本字体自动替代。（例如：Arial，Helvetica，Noto Sans，DejaVu Sans等，根据系统的不同而不同）
  • 也就是说，使用font-family: sans-serif;，浏览器会查找该操作系统的默认无衬线字体并显示。
  • 大多数系统预装有如DejaVu Sans、Liberation Sans、Noto Sans等。
  • 因此仅设置sans-serif即可自动映射并良好显示。

❌ Docker容器环境

许多容器（特别是python:3.x-slim，debian-slim）中基本没有安装字体
→ 韩文、日文甚至英文都可能显示为方框（□）

5. 在Docker环境中安装字体

🐳 Dockerfile示例

FROM python:3.12-slim

RUN apt update && apt install -y \
    fonts-dejavu \
    fonts-noto \
    fonts-noto-cjk \
    && rm -rf /var/lib/apt/lists/*
  • fonts-dejavu：用于sans-serif的基本映射
  • fonts-noto：支持全球语言
  • fonts-noto-cjk：支持中日韩文字

6. 结论

项目 内容
Poppins 仅支持拉丁字符，不支持韩文和日文
Google Fonts 方便，但在中国等地方会被阻止
本地安装 最稳定的方式
sans-serif 系统默认字体，在Docker中可能未安装
Docker支持 需要安装fonts-dejavu、fonts-noto、fonts-noto-cjk

📦 奖励：推荐的fallback字体设置

font-family: 'Poppins', 'Noto Sans KR', 'Noto Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  • Apple SD Gothic Neo：macOS
  • Malgun Gothic：Windows
  • 为每个系统提供优雅的韩文字体fallback

🙋 您觉得这有帮助吗？

  • 请通过评论或电子邮件给出反馈。
  • 这个博客在您们的关注下不断成长。