提供的 CSS 文件现已经过压缩并美化注释来重构,旨在更高的加载效率。前往 Blog
s-font

嵌入到 Web 项目

DouyinSans 抖音美好体

github.com|代号 084

载入字体中...

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

语种预览

全世界无产者,联合起来!

简体中文

Workers of the world, Unite!

英文

1234567890

阿拉伯数字

嵌入字体

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

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

body {
   font-family: "Douyin Sans";
   font-weight: normal;
}

使用 HTML 标签预先连接,以在开始加载时更快的载入。

<link rel="preconnect" href="https://static.zeoseven.com" crossorigin />
<link rel="stylesheet" href="https://static.zeoseven.com/zsft/84/main/result.css" />

<style>
   body {
       font-family: "Douyin Sans";
       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/84/main/result.css";
       d.onerror=function(){$.removeChild(d);a(c);s++;};$.appendChild(d);
   };};a(z[0],z[1]);$.appendChild(document.createElement('style')).innerHTML=`${t}{font-family:${f}}`;},0);
})(['.', '-host.'],0,
   // 传入 font-family ,可修改为 serif, monospace 等 CSS 语法。
   '"Douyin Sans", system-ui, sans-serif',
   // 传入字体应用的目标元素,可修改为类名或 id ,如 .box, #box, .box:hover 等 CSS 语法。
   "body"
);

只需要加载 10KB 左右的文件,对于只需要此字体的 英文字符和标点 及 数字 的场景非常适合。

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

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

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

不符合中国法律法规的网站请勿使用。 需要帮助? ZeoSeven 提供了 文档

字体介绍

介绍内容字体

Font files available from ByteDance Fonts

DouyinSans 抖音美好体

"DouyinSans" is the official font released by the Douyin Brand Creative Center. It holds full intellectual property rights and is open source to the public.It includes a total of 6,763 Chinese characters and 682 alphanumeric and punctuation symbols. The font style is simple and concise, full and comfortable, both rigid and flexible, thick and upright, providing a good user reading experience and visual impression. It not only conveys Douyin's brand message of "Capturing the Beautiful Life" but also better meets the creative demands of Douyin creators. Everyone is welcome to use it!

“抖音美好体”是抖音品牌创意中心推出的抖音官方字体,具有完全知识产权且对外开源。 一共包含6763个汉字以及682个数字西文符号,字体风格简洁凝练、饱满舒适、刚柔并济、厚重挺拔,具有较好的用户阅读体验和视觉感受,不仅传递出抖音“记录美好生活”的品牌主张,同时更好地满足了抖音创作者的创作诉求,欢迎大家使用!

github.com/bytedance/fonts

设计师

字节跳动, 方正字库

浏览设计师的其它作品

许可协议

OFL

前往 openfontlicense.org 查阅

免费商用
嵌入

随机推荐

载入中...

简体中文

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

英文

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.