文档
文档目录
#嵌入字体的四大方法
ZSFT 中有四大嵌入方法: 常规 CSS 、预载 HTML 、高级冗余.js 和 英文子集化。
#常规 CSS
这是最通用也是推荐的方法,任何字体都会提供 “常规 CSS” 选项,可以将它使用在 .css 文件或 HTML 的 <style> 中。
/* 大体积字体,按需加载 */ @import url('https://static.zeoseven.com/zsft/1/main/result.css'); body { font-family: "JinzisheTongfang"; font-weight: normal; } /* 小体积字体,完整字库和冗余 */ @font-face { font-family: "zsft-a"; src: url('https://static.zeoseven.com/zsft/a/main.woff2') format('woff2'), url('https://static-host.zeoseven.com/zsft/a/main.woff2') format('woff2'); font-display: swap; } body { font-family: "zsft-a"; font-weight: normal; }
通常用于:
需要使用 <style> 包裹的:
优点:
缺点:
提供:
#预载 HTML
此选项可以被用在 HTML 或 PHP 中,通过预先连接 ZSFT CDN 的方法来更快的加载字体。
<link rel="preconnect" href="https://static.zeoseven.com" crossorigin /> <link rel="stylesheet" href="https://static.zeoseven.com/zsft/1/main/result.css" /> <style> body { font-family: "JinzisheTongfang"; font-weight: normal; } </style>
通常用于:
优点:
缺点:
提供:
#高级冗余.js
将提供一段 JS 代码动态的加载字体,实现当 CDN 出现错误时立即直接由源服务器提供文件来始终不断的加载字体。
((z,s,f,t)=>{setTimeout(()=>{let $=document.head;let a=(b,c)=>{ /* ... */ })( /* ... */ )
通常用于:
需要使用 <script> 包裹的:
优点:
缺点:
提供:
#英文子集化
提供一个静态的子集化的 WOFF2 文件,其中包含一小部分字符,用于只需要字体的英文字符和数字的情况下,因为此选项只需要加载 10KB 左右的文件,将庞大的 CJK 字体子集化为英文字体,字符有:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 ,.!?:;-
@font-face { font-family: 'zsft-enmin-1'; src: url('https://static.zeoseven.com/zsft/1/main.woff2') format('woff2'), url('https://static-host.zeoseven.com/zsft/1/main.woff2') format('woff2'); unicode-range: U+0061-007A, U+0041-005A, U+0030-0039, U+002E, U+002C, U+0021, U+003F, U+003A, U+003B, U+002D; } body { font-family: "zsft-enmin-1"; font-weight: normal; }
通常用于:
需要使用 <style> 包裹的:
优点:
缺点:
提供:
#CDN 黑名单
CDN 黑名单将不影响 fonts.zeoseven.com(主站) 和 static-host.zeoseven.com(CDN 源) 的访问,但位于黑名单中的 IP 地址或域名在请求 static.zeoseven.com 时将会被阻断。
#IP 地址
YisouSpider 的 106.8.0.0/16 已重新放开,因为 ZeoSeven 发现阻断它消耗的资源是一样的,它貌似的确遵守 robots.txt 的禁止规则,但它可能没有记忆,请求 -- 被 robots.txt 禁止 和 请求 -- 被响应阻断 实际上确实相同。 ZSFT CDN 将继续处理 YisouSpider 平均每天 2 万次的无用请求。
#域名
愿这里始终空空如也 ...
#CDN 响应标头
static.zeoseven.com 和 static-host.zeoseven.com 的响应标头中,虽然具有一定的相似度,但它们都具有以下响应:
#Cache-Control
public, max-age=31536000, s-maxage=15768000, immutable
这指定了客户端和边缘服务器的缓存行为,即 1/0.5 年时间且不会改变,这意味着客户端只需要加载一次这款字体,那么客户端的浏览器将保留字体文件 1 年时间,但因为浏览器的缓存行为和存储空间,实际上可能无法达到。
#Access-Control-Allow-Origin
*
这指定了任何主机名都可以对其中的资源进行跨域请求,这是 CDN 服务中常见的响应标头且必须。
#Access-Control-Allow-Methods
GET, OPTIONS
这指定了跨域请求允许的请求方法,通常来说,静态资源只需要 GET 和 OPTIONS 方法即可满足使用需求。
#Access-Control-Max-Age
31536000
跨域请求会首先发出预检请求来确认目标服务器是否允许跨域,而此标头指定了跨域请求在发出预检请求后,允许跨域或不允许跨域应该保留 1 年,即最大时间 1 年内都不需要再次发出预检请求确认是否允许跨域。
#Access-Control-Allow-Credentials
false
这指定了不允许跨域请求携带凭据,当然携带凭据也没有什么作用,因为 ZSFT CDN 完全静态。
#错误示例
#将 CSS 错误的使用 @font-face 引入
@font-face { font-family: "自定义名称"; src: url('https://static.zeoseven.com/zsft/2/main/result.css'); }
这将导致无法正确引入字体, @font-face 只能引入 ttf, otf, eot, woff, woff2 等字体源文件, CSS 文件需要使用 link 标签或 @import 引入。
#按需加载的痛
@font-face {font-family: "自定义名称";src:local("自定义名称"),url("https://static.zeoseven.com/zsft/2/main/0601a1cb4a9f56b374f91d612855ddad.woff2") format("woff2");font-style: normal;font-weight: 400;font-display: swap;} @font-face {font-family: "自定义名称";src:local("自定义名称"),url("https://static.zeoseven.com/zsft/2/main/5e12300c47a34e65160bae82763f87e6.woff2") format("woff2");font-style: normal;font-weight: 400;font-display: swap;} /* 此处省略很多 @font-face */ html { font-family: "自定义名称"; }
这导致了 分包的无效、按需加载的无法工作 及 字体更新后的难以跟进甚至中断。应直接使用 link 标签或 @import 引入可能提供的 CSS 文件。
#字体收录 FAQ
出于对知识产权的尊重及保护和对使用 WebFonts 用户的法律风险负责,所以字体的许可协议需要满足三个条件才能收录,
常见的满足条件的许可协议:
需要被特殊处理的许可协议:
明确不允许的许可协议:
#热门的无法收录字体
MiSans / vivo Sans 其许可协议不允许二次分发,故提供 WebFont 将违反协议。 HarmonyOS Sans 其许可协议不允许单独二次分发,故提供 WebFont 将违反协议。