s-font
载入字体中...
可直接删除上方字符并输入预览。
语种预览
1234567890
阿拉伯数字
嵌入字体
常规的引入方式,使用 CSS 或 <style> 。
@import url('https://static.zeoseven.com/zsft/32/main/result.css'); body { font-family: "南廱明體"; font-weight: normal; }
使用 HTML 标签预先连接,以在开始加载时更快的载入。
<link rel="preconnect" href="https://static.zeoseven.com" crossorigin /> <link rel="stylesheet" href="https://static.zeoseven.com/zsft/32/main/result.css" /> <style> body { font-family: "南廱明體"; 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/32/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 语法。 "'南廱明體', system-ui, sans-serif", // 传入字体应用的目标元素,可修改为类名或 id ,如 .box, #box, .box:hover 等 CSS 语法。 "body" );
只需要加载 10KB 左右的文件,对于只需要此字体的 英文字符和标点 及 数字 的场景非常适合。
/* * ZSFT 英文子集化选项 * AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 ,.!?:;- */ @font-face { font-family: 'zsft-enmin-32'; src: url('https://static.zeoseven.com/zsft/32/main.woff2') format('woff2'), url('https://static-host.zeoseven.com/zsft/32/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-32'; font-weight: normal; }
有时候,其它字重的 font-family 与默认不同,需要根据 CSS 地址中的 font-family 属性来正确引入字体。
需要帮助? ZeoSeven 提供了 文档。