嵌入到 Web 项目

IBM Plex Sans

github.com
32 种字重Sans Serif / 无衬线拉丁字母(英文)
载入中 ...

可直接删除上方字符并输入预览。

语种预览

Workers of the world, Unite!

拉丁字母(英文)

1145149870632

阿拉伯数字

嵌入字体

常规的引入方式，使用 CSS 或 <style> 。

@import url("https://static.zeoseven.com/zsft/392/main/result.css");

body {
    font-family: "IBM Plex Sans Var";
    font-weight: normal;
}

使用 HTML 实现标准的预载和冗余措施。

<link rel="preconnect" href="https://static.zeoseven.com" crossorigin />
<link rel="stylesheet"
    href="https://static.zeoseven.com/zsft/392/main/result.css"
    onerror="this.href='https://static-host.zeoseven.com/zsft/392/main/result.css'"
/>
<style>
    body {
        font-family: "IBM Plex Sans Var";
        font-weight: normal;
    }
</style>

在加载空闲时预取，完成后转为 stylesheet ，实现无阻塞渲染和冗余措施。

<link rel="preload" as="style" crossorigin
    href="https://static.zeoseven.com/zsft/392/main/result.css"
    onload="this.rel='stylesheet'"
    onerror="this.href='https://static-host.zeoseven.com/zsft/392/main/result.css'"
/>
<noscript>
    <link rel="stylesheet" href="https://static.zeoseven.com/zsft/392/main/result.css" />
</noscript>
<style>
   body {
       font-family: "IBM Plex Sans Var";
       font-weight: normal;
   }
</style>

使用 JS 引入字体实现无阻塞渲染和冗余措施，但可能会导致字体闪烁。

/*
 * ZSFT 冗余器 Version 3.1 (LICENSE: MIT, by 秋, zeoseven.com)
 * L1 不可用时由 L2 提供文件，使用 fetch HEAD 已确保框架兼容性
 * ECMAScript 2015+ (ES6+)
 */

const __zsftCss = `body { font-family: "IBM Plex Sans Var", system-ui, sans-serif }`;
// 可以将 __zsftCss 删除变为 undefined ，因为它实际上就是在 head 插入 style ，删除后在其它位置定义正确的 font-family 即可。
((z, s, f, t) => {
    setTimeout(()=>{
        z=document.head;if(typeof __zsftCss!='undefined')z.insertBefore(document.createElement("style"),(z.firstChild)).innerHTML=__zsftCss;
        f=(i)=>{return "https://static"+i+"zeoseven.com/zsft/519/main/result.css";};
        t=(i)=>{const t=document.createElement("link");t.rel="stylesheet";t.href=i;t.onerror=()=>z.removeChild(t);z.insertBefore(t,(z.firstChild));};
        const o=f(s),u=f("-host.");
        try{fetch(o,{method:"HEAD"}).then(r=>r.status>299?t(u):t(o)).catch(t(u));}catch{t(u)};
    });
})(0,".");

让大体积字体像英文字体一样，只需要加载 10KB 左右的文件。

/*
 * ZSFT 英文子集化选项
 * AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890 ,.!?:;-
 */

@font-face {
    font-family: "zsft-enmin-392";
    src: url("https://static.zeoseven.com/zsft/392/main.woff2") format('woff2'),
        url("https://static-host.zeoseven.com/zsft/392/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-392";
    font-weight: normal;
}

有时候，其它字重的 font-family 与默认不同，需要根据 CSS 地址中的 font-family 属性来正确引入字体。

Italic
      https://static.zeoseven.com/zsft/392/italic/result.css
Main
      https://static.zeoseven.com/zsft/392/main/result.css

感到困惑？ ZeoSeven 提供了 帮助与支持 其中的 嵌入字体的方法 以及关于 违法违规内容的定义和处理措施。

IBM Plex Sans

由 IBM 设计的支持但不限于 拉丁字母(英文) 的 Sans Serif / 无衬线 风格的开放字体。

许可协议

字体以 OFL 的方式授权， ZSFT 确保它可以直接应用在 WebFont 场景。 可前往 openfontlicense.org 查阅授权的详细限制、条件和许可。

字体预览

现在显示的，就是字体的字型，不过当前字体无法显示的字符会使用设备默认字体 ... ZSFT 将字体直接设置在介绍文字中以展示实际使用的效果，当然 ZSFT 也提供更好的 字体预览器。

版本

当前显示和位于 CDN 中的字体版本是 Version 1.001 ，可前往字体的源发行/分发网站 github.com 上查阅，如果发现字体有新的版本， 可以 一键提醒更新 ~ 或 使用邮件详细说明 ~ 来在 ZSFT 的 CDN 中使用更新版本。

下载

不论在什么情况下，都建议在 源发行/分发网站 中获取字体文件，因为那里提供的文件通常是最权威、最新且最安全的。

源发行/分发网站

可前往字体的源发行网站 https://github.com/IBM/plex 上查阅字体的更多权威资讯， ZSFT 也是在那里得到的字体文件和信息 ~

fonts.zeoseven.com/items/392

0
github.com
当前版本：Version 1.001
字体或字体家族有正式更新？一键提醒更新 ~ 或 使用邮件详细说明 ~
许可协议：OFLopenfontlicense.org
字重类型：静态字重 (Static Fonts)
从 github.com 下载此字体
IBM

随机推荐

换一换

载入中 ...

英文

The Communists disdain to conceal their views and aims. They openly declare that their ends can be attained only by the forcible overthrow of all existing social conditions. Let the ruling classes tremble at a Communistic revolution.