【汇总:建站字体 / 图标 / 色彩搭配】
本文最后更新于 9 天前,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

建站字体图标色彩搭配


建站字体

字体

LXGW WenKai / 霞鹜文楷

获取字体

ⅰ. 直接下载
  1. 进入 Release 界面下载对应版本的 TTF 格式文件,或在本仓库 fonts/TTF 文件夹中下载。
  2. Gitee 官方镜像仓库 fonts/TTF 文件夹中下载。
  3. 进入 猫啃网Zfont.cn自由字体 进行下载。GitHub 项目更新后,会联系站长进行更新,更新会稍晚些。 注意: 其它收录免费商用字体的网站上可能也收录了本字体,但可能不是最新版。
  4. 永硕E盘蓝奏云(密码:8ppk) 会在 GitHub 项目更新后 72 小时之内更新。
  5. 如果您使用 macOS,已经安装过 Homebrew,可以在终端输入命令:brew tap homebrew/cask-fonts && brew install font-lxgw-wenkai 来安装本字体。
  6. 如果您使用 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。需要安装 fontmakepip3 install fontmakefontToolspip3 install fonttools

注意事项

  1. 截至目前,完整版本字体含有全部 CJK 基本区汉字,以及零星扩展 A~G 区汉字。 如有补字需求,请在 Issue #33 提出,不要另开 Issue,以便于整理。
  2. 本人并不是专业的设计师,并未考虑设计美感,所以看起来可能略丑,补进去的字与原版可能略有违和感,且在 Bold 字重中部分字的轮廓曲线会有毛刺,Light 字重中部分字的轮廓会存在飞点;此外由于时间仓促,并没有多余的时间细修,部分字的部件拼接会很生硬。如有字形优化建议,请在 Issue #14 提出,不要另开 Issue,以便于整理。 (以上两个 issue 均已加上 long term 标签,且均已在 Issues 页面置顶。)
  3. 若需要在网站上使用这款字体,请参阅 Issue #24
  4. 对于搭配的西文字体,个人推荐 Ysabeau 系列字体。另有 Ysabeau Office 与霞鹜文楷轻便版的合并字体 LXGW Bright,采用 字体合并补全工具 将两款字体合并而成,提供 TTF、OTF、WOFF、WOFF2 四种格式。
  5. 该字体的更多版本 (可能会随时变动)
    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
  6. 本项目为字体项目,有关 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>

中文网字计划

独立托管 Web 字体

@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://www.hellofont.cn/
  • 说明:免费商用字体大全,个个都经过核对确认,自用商用无侵权风险

字由

喵闪字库

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

求字体

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

DaFont

FontShop

Linotype


emoji 素材网站

Emojipedia

Emojiall

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

EmojiXD

Emoji表情大全

符号大全

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

SearchEmoji

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

Emoji to Scale


图标

图标之家

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

Iconduck

Material Design Icons

免费 Favicon 生成器

favicon.io

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

Font Awesome

Font Awesome


色彩搭配

4096 Color Wheel

VisiBone Webmaster’s Color Lab

Color picking made easy

中国色

pppalette


logo / icon在线制作

LOGO123

LOGO神器

比特虫

版权归属: E家之长
本文链接: https://www.5iehome.cc/archives/webbuilding-font-icon-color-summary.html
许可协议: 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权
暂无评论

发送评论 编辑评论


上一篇
下一篇