CJK 字体通常提供一个名为 result.css 的文件,这是中文字体引入和按需加载的关键文件,应使用 @import 方式声明或 <link> 标签引入 ,例如:
@import url('https://static.zeoseven.com/cn/1/main/result.css')
这实际上等同于 <link> 引入了一个 CSS 文件,这个 CSS 文件中已使用 @font-face 声明了所有子集 WOFF2 文件,只需要在一个 CSS 类中正确设置 font-family 即可引入。
正确的 font-family 名称应展示在字体详情页的 “嵌入字体” 模块,除非那是错误的,那么就需要打开 result.css 文件查看 @font-face 声明的 font-family 来正确使用。 而英文字体因为直接提供了 WOFF2 文件,所以可以直接使用 @font-face 声明,并自定义 font-family。 CJK 字体固定 font-display: swap; 西文等其它字体提供源 WOFF2 文件可自定义 font-display 。
/* CJK 字体使用 @import 引入 */ @import url('https://static.zeoseven.com/cn/1/main/result.css'); /* 西文等其它字体使用 @font-face 引入并实现冗余 @font-face { font-family: "ZSFT-a"; src: url('https://static.zeoseven.com/en/a/main.woff2'), * 当 CDN 不可用时直接由源服务器提供文件 url('https://static-host.zeoseven.com/en/a/main.woff2'); font-display: swap; /* 设置字体加载期间的显示规则,如 auto, swap, block, fallback, optional。 */ } */ /* 选择器除了 html 也可以是 :root, body, div, p, .class, #id 等任何一切标签、类或 ID。 */ html { /* 在这里定义一切可能的 CSS 属性。属性的值作用不做描述。 */ font-family: "JinzisheTongfang"; /* 设置字体家族,推荐而非必需。 */ font-weight: normal; /* 设置字体的粗细,如 normal, bold, 或 100 至 900 之间的数值。 */ font-style: normal; /* 设置字体样式,如 normal, italic, oblique。 */ font-variant: normal; /* 设置字体变体,如 normal, small-caps。 */ font-size: 16px; /* 设置字体大小,可以是 绝对大小(如 px, pt) ,或 相对大小 (如 %, em, rem, vw, vh) ,但不推荐在 html 根元素使用相对大小。 */ line-height: normal; /* 设置行高,可以是数值、百分比、关键字 (如 normal) ,或 相对单位 (如 em, rem) 。 */ text-decoration: none; /* 设置文本装饰,如 none, underline, overline, line-through ,也可以是复合值。 */ text-align: left; /* 设置文本对齐方式,如 left, right, center, justify。 */ text-transform: none; /* 控制文本的大小写,如 none, uppercase, lowercase, capitalize。 */ letter-spacing: normal; /* 设置字符之间的间距。 */ word-spacing: normal; /* 设置单词之间的间距。 */ white-space: normal; /* 设置如何处理元素中的空白符,如 normal, nowrap, pre, pre-wrap, pre-line, break-spaces。 */ direction: ltr; /* 设置文本方向,如 ltr (左到右), rtl (右到左)。 */ text-shadow: none; /* 设置文本阴影效果,可以包含多个值,每个值有偏移量、模糊半径和颜色。 */ color: #000; /* 设置字体颜色,可以是 十六进制、RGB、RGBA、HSL、HSLA、颜色关键字 等。 */ /* ...... 更多属性 */ }
ZSFT CDN 和 fonts.googleapis.com 的实现原理略有不同,并不支持使用类似 ?family=JinzisheTongfang:wght@400display=swap 的查询字符串来动态生成 CSS 文件,那样需要很大的算力资源,而 ZSFT 则直接提供纯静态的 result.css 文件,更多自定义属性应该在自己的样式表中设定。
实际上,每个以 CSS 提供加载的字体详情页中都有对应的可选的 JS 代码,因为引入 CSS 文件并没有直接像 @font-face 引入一样的后备 URL ,而使用 JS 引入字体不仅实现了冗余,还实现了异步加载和更好的扩展性。
/* 使用 IIFE 表达式避免污染全局命名空间 */ (() => { function a (b,c) { /* 创建一个新的 link 元素来加载样式表 */ var d = document.createElement('link'); d.rel = 'stylesheet'; /* 设置 link 元素的 href 属性为传入的 CSS 文件 URL */ d.href = b; /* 当加载样式表失败时触发 onerror 事件处理器 */ d.onerror = function() { if (typeof c==='function') { c(); } }; /* 将创建的 link 标签添加到 head 标签 */ document.head.appendChild(d); /* 设置根元素的字体属性,当然, JS 是灵活的,也可以将字体设置到其它元素 */ document.documentElement.style.fontFamily = 'LXGW ZhenKai'; document.documentElement.style.fontWeight = 'normal'; } /* 尝试从 CDN 加载样式表,如果失败,则调用回调函数 */ a ('https://static.zeoseven.com/cn/2/main/result.css', function () { /* 当 CDN 不可用时直接由源服务器提供文件 */ a ('https://static-host.zeoseven.com/cn/2/main/result.css'); }); })();
源服务器和 CDN 提供域的路径一致,可以用于一切具有 https://static.zeoseven.com 的路径,都可以修改为 https://static-host.zeoseven.com 实现后备。
static.zeoseven.com 和 static-host.zeoseven.com 的响应标头中,具有一定的相似度,它们都具有以下响应:
public, max-age=31536000, immutable
这指定了客户端和边缘服务器的缓存行为,即 1 年时间且不会改变,这意味着客户端只需要加载一次这款字体,那么客户端的浏览器将保留字体文件 1 年时间,但因为浏览器的缓存行为和存储空间,实际上可能无法达到。
*
这指定了任何主机名都可以对其中的资源进行跨域请求,这是 CDN 服务中常见的响应标头且必须。
GET, OPTIONS
这指定了跨域请求允许的请求方法,通常来说,静态资源只需要 GET 和 OPTIONS 方法即可满足使用需求。
31536000
跨域请求会首先发出预检请求来确认目标服务器是否允许跨域,而此标头指定了跨域请求在发出预检请求后,允许跨域或不允许跨域应该保留 1 年,即最大时间 1 年内都不需要再次发出预检请求确认是否允许跨域。
false
这指定了不允许跨域请求携带凭据,当然携带凭据也没有什么作用,因为 ZSFT CDN 完全静态。
@font-face { font-family: "自定义名称"; src: url('https://static.zeoseven.com/cn/2/main/result.css'); }
这将导致无法正确引入字体, @font-face 只能引入 ttf, otf, eot, woff, woof2 等字体源文件, CSS 文件需要使用 link 标签或 @import 引入。
@font-face {font-family: "自定义名称";src:local("自定义名称"),url("https://static.zeoseven.com/cn/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/cn/2/main/5e12300c47a34e65160bae82763f87e6.woff2") format("woff2");font-style: normal;font-weight: 400;font-display: swap;} /* 此处省略很多 @font-face */ html { font-family: "自定义名称"; }
当我看到这样的引入方式时,我首先认为站长实际上非常有耐心,愿意去修改 url 和 font-family 并同时去除 unicode-range 字符集定义,但这当然可以正确引入,但是加载了所有字体源文件,这导致了按需加载直接失效。如果说要加载所有字体源文件, ZeoSeven 其实可以直接提供完整的 WOFF2 文件,而直接复制字体详情页的 CSS 代码才是最佳实践。
SIL Open Font License / OFL / OFLv1.1 / OFLv1 Apache License / Apache 2.0 GNU General Public License / GPL / GPLv3 / GPLv2 MIT License / MIT BSD License / BSD CC BY / CC BY-SA / CC BY-ND / CC 0 Do What the Fuck You Want to Public License / WTFPL / WTFPLv2
IPA Font License / IPA CC BY-NC
一些许可证未列出,可根据 “作者声明” 标准判断。