s-font
载入字体中...
可直接删除上方字符并输入预览。
语种预览
1234567890
阿拉伯数字
嵌入字体
常规的引入方式，使用 CSS 或 <style> 。
@import url('https://static.zeoseven.com/zsft/28/main/result.css');
body {
font-family: "IPAexGothic";
font-weight: normal;
}使用 HTML 标签预先连接，以在开始加载时更快的载入。
<link rel="preconnect" href="https://static.zeoseven.com" crossorigin />
<link rel="stylesheet" href="https://static.zeoseven.com/zsft/28/main/result.css" />
<style>
body {
font-family: "IPAexGothic";
font-weight: normal;
}
</style>使用 JS 引入字体实现冗余，但可能会导致字体闪烁。
/*
* ZSFT 超小~型CSS冗余器 Version 3 (LICENSE: MIT, by 秋, zeoseven.com)
* CDN 载入出错时直接由源服务器提供文件
*/
((z,s,f,t)=>{setTimeout(()=>{let $=document.head;let a=(b,c)=>{
if(s===0){let d=document.createElement('link');d.rel='stylesheet';d.href="https://static"+b+"zeoseven.com/zsft/28/main/result.css";
d.onerror=function(){$.removeChild(d);a(c);s++;};$.appendChild(d);
};};a(z[0],z[1]);$.appendChild(document.createElement('style')).innerHTML=`${f}{font-family:${t}}`;},0);
})(['.', '-host.'],0,
// 传入 font-family ，可修改为 serif, monospace 等 CSS 语法。
"'IPAexGothic', system-ui, sans-serif",
// 传入字体应用的目标元素，可修改为类名或 id ，如 .box, #box, .box:hover 等 CSS 语法。
"body"
);只需要加载 10KB 左右的文件，对于只需要此字体的 英文字符和标点 及 数字 的场景非常适合。
/*
* ZSFT 英文子集化选项
* AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 ,.!?:;-
*/
@font-face {
font-family: 'zsft-enmin-28';
src: url('https://static.zeoseven.com/zsft/28/main.woff2') format('woff2'),
url('https://static-host.zeoseven.com/zsft/28/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-28';
font-weight: normal;
}有时候，其它字重的 font-family 与默认不同，需要根据 CSS 地址中的 font-family 属性来正确引入字体。
需要帮助？ ZeoSeven 提供了 文档。