网站设计字体使用初探

最近有建立个人网站的意向,申请的 GitHub Education 还没下来,就先来考虑下该使用什么字体。

站内之前有朋友问过 星海云端目前用的字体是啥? 看了一下 本站 Fontfamily 是 Arial, sans-serif; 但 Arial 本质是一个商业字体,Windows 用户在获得系统授权时有 使用 的权利。顺带一提,翱翔门户使用的是苹方字体,Fontfamily 是 PingFangSC-Regular,PingFang SC,Helvetica Neue,Microsoft YaHei,Arial,sans-serif。po 很喜欢的一个播客 Anyway.FM 除部分标题采用自制字体外也采用的苹方字体。以下对于苹方字体的说明出自 oooooohmygosh 的视频 你很可能因为字体收到律师函,但我能帮你。 中提到的插件

根据 Apple 官方许可证中的说法,您可以在使用正版 MacOS 操作系统中的正版 Apple 软件时,使用系统提供的字体进行预览和打印。这里的预览和打印包括了日常的海报设计、网页设计等等大部分使用场景,但是不允许在软件中嵌入这些字体。值得注意的是,即便你这样做,也无法 100% 避免字体厂商向您维权。但如果您使用的字体由正版 MacOS 操作系统中的正版 Apple 软件提供,至少可以在纠纷中立于不败之地。

但 Arial 这款字体查了一圈并没有找到使用权限说明,且该字体一直“饱受争议”,参考 Arial 是“坏”字体吗?。里面提到的 Helvetica 也是一款商用字体,这两款字体同归属于蒙纳字库。上边引用的站内贴中提到的 Colfax 是 Adobe Fonts 库中的字体,其属于 Creative Cloud 订阅的一部分,显然 po 并没有钱购入这个订阅 :smiling_face_with_tear:

Colfax | Adobe Fonts

字体许可

购买一款字体的授权虽然在考虑范围之内,没必要也没啥用。几百元的个人授权限制多多,商业授权又是天价。以 po 之前购买的 丁卯点阵体 为例,个人授权协议如下:

协议对于使用范围、浏览量进行了详细的限制,在个人网站中使用仍有一定风险。不过拿这字体印刷电路板还蛮不错,小字号下的辨认度也还好。 内容为字母解释法及我国无线电分区代号,欢迎入坑 HAM~

为了避免 瞎玩过程中万一哪天火了 版权问题,最后还是考虑使用大厂提供的免费商用字体 :wink:

列入考虑范围的有这些

  1. 阿里系列字体(普惠体 3.0,健康体,钉钉进步体)
  2. 方正系列字体(方正黑体、方正书宋、方正仿宋、方正楷体 、方正甲骨文
  3. 思源系列字体(思源宋体、思源黑体)
  4. 得意黒

用即时设计网页端对以上字体进行了测试,如下图所示


可以看出,健康体、钉钉进步体、方正系列字体是打不出我的 ID 的 :smiling_face_with_tear:,因此不能作为主要字体使用。 有可能是这个网页端字库不全,目前没有进一步查证。

近期我国字库标准有个大动作,参考 字谈字畅 241:三榜定案修改单

GB 18030-2022 两年三次征求意见后,于 9 月 30 日公布了《第 1 号修改单》。

详见:全国标准信息公共服务平台

【GB18030-2022 实现级别摘要】

  • GB18030-2022 标准执行方式改为三个实现级别,不再分为强制部分和推荐部分。

  • 实现级别 1:用于最基本的中文信息处理和交换
    实现级别 1 在 GB18030-2022 的标准中,要求在 GB18030-2005 强制部分的基础上去掉新标准中删除的编码部分,并加上在 CJK 基本平面下的新增的 66 个汉字共 27,584 汉字。任何适用的产品均应满足实现级别 1 的要求。

  • 实现级别 2:用于促进《通用规范汉字表》的信息化应用
    实现级别 2 包含实现级别 1。此外,实现级别 2 还支持《通用规范汉字表》中的没有包含在实现级别 1 之内的编码汉字 196 汉字。系统软件及支撑软件,应满足实现级别 2 的要求。

  • 实现级别 3:用于解决信息系统生僻字问题
    实现级别 3 包含实现级别 2。此外,实现级别 3 还支持本文件规定的全部汉字及康熙部首部分。
    用于政务服务和公共服务的产品应满足实现级别 3 的要求。

因此如果想让字体具有广泛的适用性,至少要满足新国标的 L2,最好能达到 L3。

阿里巴巴普惠体 3.0 为一套符合新国家标准 GB18030-2022 的简体中文字符集,包含 GB18030-2022 强制规范三个实现级别:实现级别 1+实现级别 2 标准规格的 7 字重、实现级别 3 标准规格的 Regular 单一字重。7 字重共 194,460 个全形汉字。包含拉丁字母、希腊字母、西里尔字母、标点符号。

太叼了

思源宋体(Source Han Serif),支持四种不同的东亚语言——简体中文、繁体中文、日文和韩文,同时还提供七种字体粗细形式的共 65,535 个字形(OpenType 格式支持的最大上限)

思源黑体是 Adobe 与 Google 宣布推出的一款开源字体,有七种字体粗细(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy),完全支持日文、韩文、繁体中文和简体中文,还包括来自 Source Sans 字体家族的拉丁文、希腊文和西里尔文字形共 65536 个字形。

很叼但没那么叼

最终暂时考虑标题采用思源宋体 (衬线体),正文采用阿里巴巴普惠体 3.0 (非衬线体),具体等实际部署时再调整吧~

最后,请求各位大佬来点网站建立教程,什么形式都可以,主要想玩儿下前端和数据库调用~ 写个鸡尾酒配方查询网站

4 Likes

建个人站是做什么呢,写博客等吗

:eyes: 如果只是博客可以考虑一些框架例如 Hexo、Hugo、Zola、Typecho、Halo、
WordPress 等,玩点前端和数据库的话,我也不太懂了 :smiling_face_with_three_hearts:

1 Like

感谢!博客是一部分啦,后面是想用框架搭一个博客做子界面的,请问这些框架有哪个比较推荐的吗?看了下 Hexo 能直接部署到 github pages,可能会比较方便?

目前主要是做一个鸡尾酒的配方查询网站,搭了一部分,欢迎来 这里 看看~

初衷是想试试各种酷炫的 CSS,当一个可以随时查看和把玩的 photoshop 来用 (?)

2 Likes

Cool :heart_eyes:,真的很不错~

不过似乎对键盘支持还不够好,例如搜索的时候没法响应 Enter 和 Esc 等,希望可以加入哈哈

然后推荐的话,部署到 GitHub Pages 的话,静态博客都是可以的,例如 Hexo、Hugo、Zola 这种,动态博客不行(例如 Typecho、Halo、
WordPress)。我个人比较推荐 Hugo(我目前用的也是这个),速度更快,但是主题可能不如 Hexo 多,当然如果你自己写主题的话可以无视

具体我框架选择的一些历程可以参考下文:

1 Like

好的好的,学习了!大佬的这个页面好简洁,好喜欢 :heart:

刚开始接触还在慢慢摸索,基础功能 bug 还很多 :smiling_face_with_tear:网页搭建可玩性好强,好多内容要学,蛮有趣的哈哈哈

1 Like

font-family 并不侵权,他只是对浏览器的建议,最终由浏览器作出选择。目前好像并没有对 font-family 起诉成立的案件。况且,指定一些默认系统中不存在的字体,对绝大多数用户体验都不好,如果是内嵌字体,耗费的带宽也很大。
但是指定 font-face 是侵权的。

1 Like

感谢解答!

以上面个人授权协议的截图为例,webfonts 只包含 font-face 而不包含 font-family 吗?定义 font-family 的时候不是需要通过 font-face 定义嘛?还是说指的是比如 Arial这种字体能直接在 font-family 中调用,所以不涉及版权吗?

尝试了用 L2 级别字库,woff2 格式进行调用,感觉速度还可以。默认字体实在有点难以满足设计需求 :smiling_face_with_tear:

指的是对元素直接指定 font-family 的那种,比如
body{
font-family: ‘…’;
}
这样的话使用的是系统的字体,不会出现版权问题

1 Like

之前做仿 LaTex 主题的时候有搜集过字体,待会儿找找看

1 Like

请问使用框架只能部署到域名吗?

我尝试使用 Hugo 通过 Github Pages 和 Vercel 部署到子页面(比如 薄洋 )Vercel 要更改 CNAME 无法直接定向到子页面,舍弃;Github 用仓库的方式直接指向这个页面没有找到成功的解决方案,搜索的方法都是直接部署到 xxx.github.io 的。这一周尝试了几次,要么无法部署,要么下载的格式(使用 git 直接获取或者下载源码解压)加载不出来 :smiling_face_with_tear:

已经准备尝试用 marked.js 读取 markdown 文档直接写页面了 :smiling_face_with_tear:

直接用 GitHub Pages 上绑定域名的方式想定向到自有域名的 subpage 应该不太行,我也没尝试过

可以考虑自己在服务器部署 Nginx 托管然后用 GitHub Actions 同步静态资源到目录

1 Like

sry 前几天在外面玩,忘记回了,可以参考这个仓库

中的以下部分:

1 Like

重定向好像是 ok 的,比如:

<script>location.href = "https://yourdomain.com";</script>

你可以参考一下这个仓库结构:

这样的话当你访问 https://<user-name>.github.com 的时候就会自动重定向到 https://example.com 如果你要自定义域名的话请在 repo 根目录下创建一个 CNAME 的文件,里面写好域名,根域名或者子域名都行,然后做好 DNS 解析,解析里面写https://<user-name>.github.com

但我不是很理解为什么要使用重定向的方法,这样的话似乎会影响 SEO,而且也不是很美观

如果不想在根目录下部署页面,也可以重新开一个仓库,这样的话用 Github Actions 部署出来的页面就在 https://yourdomin.com/repo-name 下面了

这个方法我其实想过但是不知道怎么实现,我想的办法是用 SSH 和 SFPT?

1 Like

这个项目使用的是华文书宋和它的改编版(Family Song),是有版权的 :smiling_face_with_tear:
SF Mono 是基于苹果的 San Francisco 改来的,但我没有 MacOS,版权可能也有问题
LaTeX 的 lm – Latin modern fonts 不清楚能不能自用,搜索有说可以用,License 好长

这个重定向我已经在用啦,换成了 Namecheap 的 me 域名,挂上了 CloudFlare

重开仓库试过了,没太配置好 public 文件夹,打开后的网页没有任何 style,应该是哪里操作有问题

目前在尝试用 github 的库做文件存储,直接新开一个页面去读取 public 仓库的 raw 文件,使用 markdown-it 和 prism 做 markdown 的解析和美化,并加载 github-markdown-css。应该还有其他的 CSS 可以直接加载,配合上自己改一些样式,能有一定的美观性。

这种方案如果要更新博客,push 这个 public 仓库即可,下一步准备迁移到 Gitee 试试。

当前效果如下图

2 Likes

尝试迁移到 Gitee 失败了,会报跨域的错 :smiling_face_with_tear:

Access to fetch at ‘https://gitee.com/xuanzha/boyang/raw/main/docs/files.json’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. index.html:72