help

帮助与支持

#嵌入字体的四大方法

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;
}

通常用于： .css

需要使用 <style> 包裹的： .html / .htm / .php

优点：更高的加载优先级，字体被缓存后无闪烁， WebFonts 的标准方法

缺点：会阻塞 HTML 渲染

提供：任何字体

#预载 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>

通常用于： .html / .htm / .php

优点：更高的加载优先级，字体被缓存后无闪烁

缺点：会阻塞 HTML 渲染

提供：仅大体积字体

#高级冗余.js

将提供一段 JS 代码动态的加载字体，实现当 CDN 出现错误时立即直接由源服务器提供文件来始终不断的加载字体。

((z,s,f,t)=>{setTimeout(()=>{let $=document.head;let a=(b,c)=>{ /* ... */ })( /* ... */ )

通常用于： .js

需要使用 <script> 包裹的： .html / .htm / .php

优点：更低的加载优先级，无阻塞 HTML 渲染，加载冗余

缺点：字体被缓存后仍然闪烁

提供：仅大体积字体

#英文子集化

提供一个静态的子集化的 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;
}

通常用于： .css

需要使用 <style> 包裹的： .html / .htm / .php

优点：更高的加载优先级，字体被缓存后无闪烁， WebFonts 的标准方法，加载更快

缺点：会阻塞 HTML 渲染，字库字符缺失

提供：仅大体积字体

#CDN 黑名单

通常，网络运营商的公网 IP 地址不会出现在黑名单，不会影响正常用户的使用， CDN 黑名单将不影响 fonts.zeoseven.com(主站) 和 static-host.zeoseven.com(CDN 源) 的访问，但位于黑名单中的 IP 地址或域名在请求 static.zeoseven.com 时将会被阻断。

#IP 地址

因为一些不可抗力因素， ZeoSeven 已重新放开 YisouSpider 搜索引擎爬虫并继续处理 YisouSpider 平均每天 5 万次的无效爬取请求。

#CDN 响应标头

static.zeoseven.com 和 static-host.zeoseven.com 的响应标头中，虽然具有一定的相似度，但它们都具有以下响应：

#Cache-Control

public, max-age=31536000, immutable

这指定了客户端和边缘服务器的缓存行为，即 1 年时间且不会改变，这意味着客户端只需要加载一次这款字体，那么客户端的浏览器将保留字体文件 1 年时间，但因为浏览器的缓存行为和存储空间，实际上可能无法达到 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 用户的法律风险负责，所以字体的许可协议需要满足三个条件才能收录，1. 免费商用 2. 允许转换和二次分发 3. 允许嵌入

常见的满足条件的许可协议： OFL / MIT / Apache / GPL 。

需要被特殊处理的许可协议： IPA 。

明确不允许的许可协议： CC BY-NC 。

单个字体文件大小应在 60 MB 以下，否则可能会导致无法分包而无法提供 WebFonts 。

#热门的无法收录字体

MiSans / vivo Sans    其许可协议不允许 二次分发，故提供 WebFont 将违反协议。
HarmonyOS Sans    其许可协议不允许 单独二次分发，故提供 WebFont 将违反协议。
* 阿里妈妈系列    其许可协议不允许 转换、拆分，无法提供 WebFont ，除非系列内具有例外。

#无法正常提供的字体

以下字体在提交收录申请后，即便是转换格式，也无法被子集或切割，或者最终输出乱码或字符错位而无法提供或无效的提供 WebFont 。

github.com/Warren2060/ChillMovableType
  ChillMovableType / 活字印刷字体项目 / 包括此系列字体
      [V1.000] 不转换(.otf)切割则字符为空白或缺字，转换后(.ttf)切割出现乱码，西文错位

#热度值

只不过是过去 30 天内字体的累计统计数据，热度值会下降和上升，实时变化。包括但不限于字体的被点击次数、字体的详情页浏览次数、外部链接到字体详情页的次数等 ... (不过热度值和直接的统计数据总和不是相等的，因为热度值不是相加得来的 ~)

虽然服务器的统计数据实时更新，但为了避免频繁请求导致的服务器性能问题和过多的加载过程，所以当请求 1 次后，会在浏览器保存当时的统计数据以复用，本地统计数据会保留 24 小时，之后或被手动清除后会再次重新获取。

* 当然，这不过代表字体在 ZSFT 中的受欢迎程度。

帮助与支持

目录

#嵌入字体的四大方法

#常规 CSS

#预载 HTML

#高级冗余.js

#英文子集化

#CDN 黑名单

#IP 地址

#CDN 响应标头

#Cache-Control

#Access-Control-Allow-Origin

#Access-Control-Allow-Methods

#Access-Control-Max-Age

#Access-Control-Allow-Credentials

#错误示例

#将 CSS 错误的使用 @font-face 引入

#按需加载的痛

#字体收录 FAQ

#热门的无法收录字体

#无法正常提供的字体

#热度值