嵌入到 Web 项目

JetBrains Maple Mono

github.com
16 种字重Monospace / 等宽Round / 圆体简体中文拉丁字母(英文)西里尔字母(俄文)日文繁体中文希腊文
载入中 ...

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

语种预览

全世界无产者，联合起来！

简体中文

Workers of the world, Unite!

拉丁字母(英文)

Пролетарии всех стран, соединяйтесь!

西里尔字母(俄文)

万国の労働者よ、団結せよ！

日文

萬國勞動者其團結！

繁体中文

Προλετάριοι όλων των χωρών, ενωθείτε!

希腊文

1145149870632

阿拉伯数字

嵌入字体

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

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

body {
    font-family: "JetBrains Maple Mono";
    font-weight: normal;
}

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

<link rel="preconnect" href="https://static.zeoseven.com" crossorigin />
<link rel="stylesheet"
    href="https://static.zeoseven.com/zsft/521/main/result.css"
    onerror="this.href='https://static-host.zeoseven.com/zsft/521/main/result.css'"
/>
<style>
    body {
        font-family: "JetBrains Maple Mono";
        font-weight: normal;
    }
</style>

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

<link rel="preload" as="style" crossorigin
    href="https://static.zeoseven.com/zsft/521/main/result.css"
    onload="this.rel='stylesheet'"
    onerror="this.href='https://static-host.zeoseven.com/zsft/521/main/result.css'"
/>
<noscript>
    <link rel="stylesheet" href="https://static.zeoseven.com/zsft/521/main/result.css" />
</noscript>
<style>
   body {
       font-family: "JetBrains Maple Mono";
       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: "JetBrains Maple Mono", 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-521";
    src: url("https://static.zeoseven.com/zsft/521/main.woff2") format('woff2'),
        url("https://static-host.zeoseven.com/zsft/521/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-521";
    font-weight: normal;
}

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

Bold
      https://static.zeoseven.com/zsft/521/bold/result.css
Bold Italic
      https://static.zeoseven.com/zsft/521/bold-italic/result.css
Extra Bold
      https://static.zeoseven.com/zsft/521/extra-bold/result.css
Extra Bold Italic
      https://static.zeoseven.com/zsft/521/extra-bold-italic/result.css
Extra Light
      https://static.zeoseven.com/zsft/521/extra-light/result.css
Extra Light Italic
      https://static.zeoseven.com/zsft/521/extra-light-italic/result.css
Italic
      https://static.zeoseven.com/zsft/521/italic/result.css
Light
      https://static.zeoseven.com/zsft/521/light/result.css
Light Italic
      https://static.zeoseven.com/zsft/521/light-italic/result.css
Medium
      https://static.zeoseven.com/zsft/521/medium/result.css
Medium Italic
      https://static.zeoseven.com/zsft/521/medium-italic/result.css
Regular
      https://static.zeoseven.com/zsft/521/main/result.css
Semi Bold
      https://static.zeoseven.com/zsft/521/semi-bold/result.css
Semi Bold Italic
      https://static.zeoseven.com/zsft/521/semi-bold-italic/result.css
Thin
      https://static.zeoseven.com/zsft/521/thin/result.css
Thin Italic
      https://static.zeoseven.com/zsft/521/thin-italic/result.css

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

中英文完美 2:1 宽的 JetBrains Mono + Maple Mono 无衬线合成字体，工整，优雅，超高可读性

设计师

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

随机推荐

换一换

载入中 ...

简体中文

共产党人不屑于隐瞒自己的观点和意图。他们公开宣布：他们的目的只有用暴力推翻全部现存的社会制度才能达到。让统治阶级在共产主义革命面前发抖吧。无产者在这个革命中失去的只是锁链。他们获得的将是整个世界。

英文

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.

日文

共产党人は自分たちの見解や意図を隠すことを軽蔑しています。彼らは公然と宣言しています：彼らの目的は、すべての現存する社会制度を暴力で推翻することでのみ達成できます。支配阶级は共産主義革命の前に震えざるを得ません。無産者はこの革命で失うのはただの鎖であり、得るのは世界全体であるだけです。

繁体中文

共產黨人不屑於隱瞞自己的觀點和意圖。他們公開宣佈：他們的目的只有用暴力推翻全部現存的社會制度才能達到。讓統治階級在共產主義革命面前發抖吧。無產者在这个革命中失去的只是鎖鏈。他們获得的將是整個世界。