【汇总：建站字体 / 图标 / 色彩搭配】

本文最后更新于 196 天前，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

字体

LXGW WenKai / 霞鹜文楷

Github 地址：https://github.com/lxgw/LxgwWenKai
说明：一款开源中文字体，基于 FONTWORKS 出品字体 Klee One 衍生。

获取字体

ⅰ. 直接下载

进入 Release 界面下载对应版本的 TTF 格式文件，或在本仓库 fonts/TTF 文件夹中下载。
在 Gitee 官方镜像仓库 fonts/TTF 文件夹中下载。
进入猫啃网、Zfont.cn、自由字体进行下载。GitHub 项目更新后，会联系站长进行更新，更新会稍晚些。 注意： 其它收录免费商用字体的网站上可能也收录了本字体，但可能不是最新版。
永硕Ｅ盘、蓝奏云（密码：8ppk）会在 GitHub 项目更新后 72 小时之内更新。
如果您使用 macOS，已经安装过 Homebrew，可以在终端输入命令：brew tap homebrew/cask-fonts && brew install font-lxgw-wenkai 来安装本字体。
如果您使用 Windows，已经安装过 Scoop，可以在终端输入命令：scoop bucket add nerd-fonts && scoop install LXGWWenKai 或者 scoop bucket add nerd-fonts && scoop install LXGWWenKaiMono 来安装本字体。亦可查看微软官方教程：如何在 Windows 中安装或删除字体。

ⅱ. 从源代码生成

请运行 ./sources/build.bat 或 ./sources/build.sh。需要安装 fontmake：pip3 install fontmake 和 fontTools：pip3 install fonttools。

注意事项

截至目前，完整版本字体含有全部 CJK 基本区汉字，以及零星扩展 A~G 区汉字。 如有补字需求，请在 Issue #33 提出，不要另开 Issue，以便于整理。
本人并不是专业的设计师，并未考虑设计美感，所以看起来可能略丑，补进去的字与原版可能略有违和感，且在 Bold 字重中部分字的轮廓曲线会有毛刺，Light 字重中部分字的轮廓会存在飞点；此外由于时间仓促，并没有多余的时间细修，部分字的部件拼接会很生硬。如有字形优化建议，请在 Issue #14 提出，不要另开 Issue，以便于整理。 （以上两个 issue 均已加上 long term 标签，且均已在 Issues 页面置顶。）
若需要在网站上使用这款字体，请参阅 Issue #24。
对于搭配的西文字体，个人推荐 Ysabeau 系列字体。另有 Ysabeau Office 与霞鹜文楷轻便版的合并字体 LXGW Bright，采用字体合并补全工具将两款字体合并而成，提供 TTF、OTF、WOFF、WOFF2 四种格式。
该字体的更多版本 （可能会随时变动）
1. 霞鹜文楷屏幕阅读版 / LXGW WenKai Screen 由于原版「霞鹜文楷」Regular 字重在 PC 和 Android 屏幕上显示较细，而 Bold 字重需要在粗体模式下才能调用，特制作以 Bold 字重为基础的，加粗后的「霞鹜文楷」与 Windows 默认英文字体 Segoe UI Regular 粗细相当，PC 和 Android 手机屏幕阅读更加舒适，无需特别切换到粗体模式。
2. 霞鹜文楷轻便版 / LXGW WenKai Lite：剔除 v1.100 版本增补的一些较不常用的汉字，便于开发者将字体嵌入软件中。若完整版有字形优化或特性更新，精简版也将会跟进。精简版不包含谚文。
3. 霞鹜文楷 GB / LXGW WenKai GB：在文楷基础上进一步调整字形和笔形，符合 G 源字形规范。包含《通用规范汉字表》8105 个汉字。另有与「芫荽」等同源字体合并的「缝合楷」，及使用本项目字体补全的 GB 融合版。
4. 霞鹜文楷 TC / LXGW WenKai TC：供繁体中文用户和旧字形爱好者使用，基于轻便版制作，采用旧字形写法，主要采用 Klee One 的隐藏字形，部分部件手动修改（大部分部件参考一点字坊「传承字形标准化文件」，借助「汉文博士」「国学迷」「字统网」等工具按部件查字，对字形进行修改）。此外已有基于 Klee One 改造的繁体中文字体芫荽 / Iansui，采用台湾地区的教育标准字形；另有采用香港地区字形标准的芫茜雅楷 / JyunsaiKaai。
本项目为字体项目，有关 Magisk 字体模块等手机字体替换有关的问题，请移步模块模板的 Issues 里反馈，不要在本项目开议题。

网页引用

Put the jsDelivr into your html head, then update the font-family.

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- Lite version -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- TC version -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- Screen version -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
  <style>
    body {
      font-family: "LXGW WenKai", sans-serif;
      /* Lite version */
      font-family: "LXGW WenKai Lite", sans-serif;
      /* TC version */
      font-family: "LXGW WenKai TC", sans-serif;
      /* Screen version */
      font-family: "LXGW WenKai Screen", sans-serif;
    }
  </style>
</head>
<body>
  <!-- blablabla -->
</body>
</html>

2024-07-26 更新

参考地址：https://github.com/tw93/tw93.github.io/blob/master/css/comment.css

引用代码：

@import url('https://gw.alipayobjects.com/os/k/font/lxgwwenkaiscreenr.css');

中文网字计划

官方地址：https://chinese-font.netlify.app/
Github 地址：https://github.com/KonghaYao/chinese-free-web-font-storage
说明：收录众多中文字体并通过 Web Font 的形式为网站开发者提供美丽字体的开源项目。提供便捷实用的全字符集中文渲染方案。

霞鹜文楷字体：https://chinese-font.netlify.app/fonts/lxgwwenkai/lxgwwenkai-regular/
通过链接嵌入

<link rel='stylesheet' href='https://192960944.r.cdn36.com/chinesefonts3/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css' />

@import("https://192960944.r.cdn36.com/chinesefonts3/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css")

限定字体使用区域

article {
font-family:'LXGW WenKai';
font-weight:'400'
};

独立托管 Web 字体

教程地址：https://taoshu.in/web/self-host-font.html
说明：用自己的服务器独立托管霞鹜文楷字体。

@font-face {
  font-family: 'LXGW WenKai Lite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./files/subset-4.woff2') format('woff2');
  unicode-range: U+1f1e9-1f1f5
}

浏览器在渲染文字时如果碰到了 1f1e9-1f1f5 范围内的 Unicode 字体才会下载对应的文件。这样就在一定程度上解决了单个中文字体体积过大的问题。所以网页字体加载很快。这里最主要的工作就是划定字体拆分规则，然后生成对应的字体文件和 CSS 描述文件。如果要自托管，就需要自己生成 CSS 文件和字体文件切片。这部分 chawyehsu 已经在项目中提供了 python 脚本。所有生成资源文件都保存在 packages/lxgw-wenkai-webfont 目录，将它们复制 Web 服务器然后引用就可以了。

站长素材

字体：https://font.chinaz.com/
图标：https://sc.chinaz.com/tubiao/

自由字体官网

地址：https://www.hellofont.cn/
说明：免费商用字体大全，个个都经过核对确认，自用商用无侵权风险

字由

地址：https://www.hellofont.cn/
说明：各种书法体、创意字体

喵闪字库

地址：https://www.miao3.cn/
说明：喵闪字库是一个专业的字体下载网站，收集并分享优秀的免费商用字体、免版权字体，提供所有字体的在线预览和免费字体下载服务。

求字体

地址：https://www.qiuziti.com/
说明：提供中文和英文字体库下载、识别与预览服务，找字体的好帮手

DaFont

地址：https://www.dafont.com/
说明：国外知名字体下载网站

FontShop

地址：https://www.fontshop.com/free-fonts
说明：国外知名字体下载网站

Linotype

地址：https://www.linotype.com/
说明：国外知名字体下载网站

Free Font

地址：https://wangchujiang.com/free-font/
说明：收录商用免费字体(汉字英文字体)

字体搬运工

地址：https://font.sucai999.com/
说明：一个专门收集整理免费商用字体的网站，字体可直接下载。

emoji 素材网站

EmojiClick

地址：https://emojis.click/zh
说明：EmojiClick 是一款AI驱动的emoji搜索工具。它通过理解你的自然语言，帮你快速找到最贴切的 emoji ——无需记住 emoji 名字，也无需翻遍表情库。

Emojiu

地址：https://emojiu.cc/
说明：emojiu 一个非常有趣好玩的表情符号世界，在这里，你可以探索各种表情符号生成工具，表情符号种类非常丰富，比如笑脸、人物、动物与自然、餐饮、旅游、活动等等。

Emojipedia

地址：https://emojipedia.org/
说明：全平台emoji表情搜索引擎

Emojiall

地址：https://www.emojiall.com/
说明：网站针对每个表情包都提供了详细的解释，除了能直接复制下载表情包，还有对应的字符编码和简短代码格式呈现，供不同用途。

EmojiXD

地址：https://emojixd.com/
说明：Emoji表情大全，颜文字百科

Emoji表情大全

地址：https://www.emojidaquan.com/
说明：Emoji 分类更加详细，支持中文搜索

符号大全

地址：http://www.fhdq.net/
说明：国内的一个符号网站，符号的种类和数量应该是最全而且最实用的一个

SearchEmoji

地址：https://searchemoji.app/zh-hans
说明：yesicon 作者新出的一个 Emoji 搜索引擎，相对传统的 Emoji 站，对中文搜索更友好也更容易找到想要的 Emoji😸。

Emoji to Scale

地址：https://javier.xyz/emoji-to-scale
Github 地址：https://github.com/javierbyte/emoji-to-scale
说明：这个网站选出一组 Emoji 符号，按照体积从小到大的顺序排列，可以滚动浏览。

图标

图标之家

地址：http://www.icosky.com/
说明：中国最大的图标免费下载网站。桌面图标，ICO，PNG图标，网页图标免费下载

Iconduck

地址：https://iconduck.com/
说明：国外免费开源图标下载

Material Design Icons

地址：https://materialdesignicons.com/
说明：网页调用方式 mdi- ，例如：mdi-home。图片上传限制2MB。

免费 Favicon 生成器

地址：https://www.websiteplanet.com/zh-hans/webtools/favicon-generator/
说明：图片上传限制为5MB，支持格式 JPG，PNG，GIF。网站还支持从免费图库直接选择。该工具由热心网友 isabel mesber 提供，再次表示感谢！

favicon.io

地址：https://favicon.io/
说明：免费的favicon生成工具，可以把 PNG、文字、emoji 转成 favicon。

Font Awesome

地址：https://fontawesome.com/
说明：网页调用方式 fas fa- ，例如：fas fa-home
地址：https://fontawesome.com/v4/icons/
说明：Argon 主题内置的 Font Awesome 4 图标库。

Font Awesome

地址：https://fa5.dashgame.com/
说明：图标字体库和CSS框架

色彩搭配

4096 Color Wheel

地址：http://www.ficml.org/jemimap/style/color/wheel.html
说明：将鼠标悬停在滚轮上可查看颜色。单击以选择 Web 智能颜色。

VisiBone Webmaster’s Color Lab

地址：http://www.visibone.com/colorlab/
说明：单击左上角的小图标，以获得小型，中型或大型调色板。

Color picking made easy

地址：https://colorsupplyyy.com/
说明：复制 HEX 代码

中国色

地址：http://zhongguose.com/
说明：中国传统颜色

pppalette

地址：https://fffuel.co/pppalette/
说明：在线调色板

logo / icon在线制作

LOGO123

地址：https://ai.logo123.com/
说明：海量logo在线设计生成器

LOGO神器

地址：https://www.logosc.cn/
说明：智能LOGO生成器

比特虫

地址：https://www.bitbug.net/
说明：在线生成favicon.ico图像

字体

LXGW WenKai / 霞鹜文楷

获取字体

ⅰ. 直接下载

ⅱ. 从源代码生成

注意事项

网页引用

中文网字计划

独立托管 Web 字体

站长素材

自由字体官网

字由

喵闪字库

求字体

DaFont

FontShop

Linotype

Free Font

字体搬运工

emoji 素材网站

EmojiClick

Emojiu

Emojipedia

Emojiall

EmojiXD

Emoji表情大全

符号大全

SearchEmoji

Emoji to Scale

图标

图标之家

Iconduck

Material Design Icons

免费 Favicon 生成器

favicon.io

Font Awesome

Font Awesome

色彩搭配

4096 Color Wheel

VisiBone Webmaster’s Color Lab

Color picking made easy

中国色

pppalette

logo / icon在线制作

LOGO123

LOGO神器

比特虫

发送评论 编辑评论

推荐文章

发送评论编辑评论