LXGW XiHei 霞鹜晰黑 MN - 免费商用字体和 WebFonts 字体 CDN - ZeoSeven Fonts (ZSFT)
s-font

嵌入到 Web 项目

LXGW XiHei 霞鹜晰黑 MN

github.com

载入字体中...

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

语种预览

1234567890

阿拉伯数字

嵌入字体

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

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

body {
   font-family: "LXGW XiHei MN";
   font-weight: normal;
}

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

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

<style>
   body {
       font-family: "LXGW XiHei MN";
       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/227/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 语法。
   "'LXGW XiHei MN', system-ui, sans-serif",
   // 传入字体应用的目标元素,可修改为类名或 id ,如 .box, #box, .box:hover 等 CSS 语法。
   "body"
);

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

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

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

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

需要帮助? ZeoSeven 提供了 文档

字体介绍


设计师

LXGW

设计师专栏

许可协议

IPA

前往 github.com 查阅

免费商用
嵌入

随机推荐

载入中...