【亲测免费】得意黑 Smiley Sans 开源项目教程

2026-01-17 08:39:30作者：何将鹤

项目介绍

得意黑 Smiley Sans 是一款在人文观感和几何特征中寻找平衡的中文黑体。该字体由 oooooohmygosh 等设计师创作，支持简体中文常用字符、拉丁字母、日文假名、阿拉伯数字及各种标点符号。字体风格独特，适合用于平面海报、电商文案、视频标题及字幕等场景。

项目快速启动

克隆项目

首先，克隆项目到本地：

git clone https://github.com/atelier-anchor/smiley-sans.git

安装依赖

进入项目目录并安装必要的依赖：

cd smiley-sans
npm install

构建字体

使用以下命令构建字体文件：

npm run build

使用字体

构建完成后，可以在 dist 目录下找到生成的字体文件。在 HTML 文件中引入字体：

<link rel="stylesheet" href="path/to/smiley-sans.css">
<style>
  body {
    font-family: 'Smiley Sans', sans-serif;
  }
</style>

应用案例和最佳实践

平面海报

得意黑 Smiley Sans 的字体风格独特，非常适合用于平面海报设计。以下是一个简单的海报设计示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>海报设计示例</title>
  <link rel="stylesheet" href="path/to/smiley-sans.css">
  <style>
    body {
      font-family: 'Smiley Sans', sans-serif;
      background-color: #f0f0f0;
      text-align: center;
      padding: 50px;
    }
    h1 {
      font-size: 48px;
      color: #333;
    }
    p {
      font-size: 24px;
      color: #666;
    }
  </style>
</head>
<body>
  <h1>得意黑 Smiley Sans</h1>
  <p>一款在人文观感和几何特征中寻找平衡的中文黑体</p>
</body>
</html>

视频标题及字幕

在视频制作中，得意黑 Smiley Sans 同样表现出色。以下是一个简单的视频标题示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>视频标题示例</title>
  <link rel="stylesheet" href="path/to/smiley-sans.css">
  <style>
    body {
      font-family: 'Smiley Sans', sans-serif;
      background-color: #000;
      color: #fff;
      text-align: center;
      padding: 50px;
    }
    h1 {
      font-size: 60px;
    }
  </style>
</head>
<body>
  <h1>得意黑 Smiley Sans 视频标题</h1>
</body>
</html>