論壇

在ESJZONE的编辑器中，可以直接使用网络字体，也可以使用自定义字体。原理都一样，因为ESJZONE不支持在文章内使用<style>来定义样式，所以只能使用<link>来引入外链的CSS样式。

• 网络字体：直接使用在线字体库（如 Google Fonts）提供的字体，简单方便。

<p><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800&amp;display=swap" rel="stylesheet"></p>
<section style="font-family: 'Noto Sans SC', serif;"><p>例如这就是一段使用了宽度为100的 "Noto Sans SC"字体的预览文本，以下是用F12打开开发人员工具后插入到编辑器区域的HTML代码：</p></section>

以Google Font作为例子。进入网页点击进字体页面后，选择`Get Font`, 然后选择`Get embed code`，你可以在右侧找到类似于 <link href="..." rel="stylesheet"> 的HTML代码，也可以在其下方的CSS示例中看到font-family后的字体名，得到这两个东西后：

首先需要插入<p><link href...></p>到编辑器文本区域，该代码可以将字体引入网页。

然后你需要在正文中使用字体：我习惯用<section>包裹文本段落来应用样式，所以我选择插入<section style="font-family: '对应字体名', serif; "><p>测试文本</p></section> ，之后将`测试文本`替换为文本段落就可以了。

• 自定义字体：需要你自己上传字体文件到CDN，并通过外链CSS引入。

（也可以将字体转化为base64编码然后内嵌。这个方法可以看 字体内嵌示例 的HTML源码，该示例通过内嵌解密字体来解密了文本）

<p><link href="https://cdn.jsdelivr.net/gh/PipeYume/css-test@%E8%8A%99%E8%8E%89%E8%8E%B2%E6%9D%A5%E8%A2%ADcss/font_face_2025-2-13.css" rel="stylesheet"></p>

<section style="font-family: 'EVA-Matisse_Standard EB', serif;"><p>這是一段使用 EVA-Matisse_Standard.ttf 字体的預覽文本，以下是HTML代碼：</p></section>

样式文件：font_face_2025-2-13.css的内容如下：

@font-face {
    font-family: 'EVA-Matisse_Standard EB';
    src:  url('https://cdn.jsdelivr.net/gh/PipeYume/css-test@%E8%8A%99%E8%8E%89%E8%8E%B2%E6%9D%A5%E8%A2%ADcss/font.subset_2025-2-13.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

我选择的方法是将字体文件和CSS文件传到Github仓库上，并使用 Jsdelivr 来充当 CDN。

先传字体文件，得到字体文件的JsDelivr链接填到css上。再传css文件，获取JsDelivr的链接填到ESJZONE编辑器文本区。

这个是获取Jsdelivr对应文件链接的网址：Migrate GitHub to jsDelivr 

注意1：将Github仓库设为公开，不然Jsdelivr访问不了。

注意2：Jsdelir一旦缓存了Github文件，就不会更新了。所以如果文件更改了，记得改个文件名，然后在Jsdelivr里获取新的链接。

注意3：ESJZONE编辑器文本区的<link href=...>和 CSS文件中的src:  url(...) 最好都使用 Jsdelivr的链接。CSS文件中的format也要跟字体匹配。

注意4：在传字体之前，建议先用 在线字体裁剪 把汉字字体裁剪为 只包含所需文字的小文件，不然完整的汉字字体太大了影响网页加载。然后再用 在线字体格式转换  把字体转化为 woff 或 woff2 格式。

• TIPS：还可以对文本进行加密，然后使用自定义的解密字体进行解密。这样就可以达到看上去是正常文本，但是复制出来是乱码的效果：字体加密文章