@joshuasu/lxgwbright-code-web NPM

LXGW Bright Code 网络字体仓库

简介

LXGW Bright Code 是由 Monaspace Argon 与霞鹜文楷系列字体合并而成的字体一款开源中文字体。字体详情请参阅原字体仓库。

感谢
本仓库改进自LXGW WenKai / 霞鹜文楷网络字体仓库，以适配LXGW Bright Code，感谢原作者的辛勤付出。
具体的改进如下：
适配 LXGW Bright Code 字体
打包成npm包，方便集成到本地项目中
优化GitHub Action

为使原字体更适合进行网络分发，本仓库使用 Github Action，利用中文网字计划开发的字体分包工具对原字体分包，网页加载时只需获取所使用的文字所在的分包，大幅降低所需加载的大小，提升网页加载速度。并已提交 npm 包，进一步利用公开 CDN。

本仓库的版本号与字体原仓库版本号保持一致。提供从本仓库建立时的最新版本 v2.611 及之后的版本。

可以点击效果展示，查看字体样式。

使用

NPM

首先安装本包

# npm
npm install @joshuasu/lxgwbright-code-web
# yarn
yarn add @joshuasu/lxgwbright-code-web
# pnpm
pnpm add @joshuasu/lxgwbright-code-web

然后在项目中引入

import "@joshuasu/lxgwbright-code-web";

这样引入的 style.css 可以调用仓库包含的所有字体，使用字体时以表格中所示的 font-family，font-style 与 font-weight 在 CSS 中调用即可。

字体	`font-family`	`font-style`	`font-weight`
LxgwBright Code	`LxgwBright Code`	`normal`	`400`
LxgwBright Code Italic	`LxgwBright Code`	`italic`	`400`
LxgwBright Code Light	`LXgwBright Code Light`	`normal`	`300`
LxgwBright Code Light Italic	`LxgwBright Code Light`	`italic`	`300`
LxgwBright Code ExtraLight	`LXgwBright Code ExtraLight`	`normal`	`200`
LxgwBright Code ExtraLight Italic	`LXgwBright Code ExtraLight`	`italic`	`200`

font-style 为 normal 可以不填，默认即为 normal

如果只需某一特定的字体，也可只引用其对应分包的 CSS 文件，这样可以减少引入不必要的文件，减小最终的产物文件。

# 引入 LxgwBright Code
import "@joshuasu/lxgwbright-code-web/400.css";
# 引入 LxgwBright Code Italic
import "@joshuasu/lxgwbright-code-web/400-italic.css";
# 引入 LxgwBright Code Light
import "@joshuasu/lxgwbright-code-web/300.css";
# 引入 LxgwBright Code Light Italic
import "@joshuasu/lxgwbright-code-web/300-italic.css";
# 引入 LxgwBright Code ExtraLight
import "@joshuasu/lxgwbright-code-web/200.css";
# 引入 LxgwBright Code ExtraLight Italic
import "@joshuasu/lxgwbright-code-web/200-italic.css";

CDN

直接将文后提供的链接以 <link> 的形式添加到网页的 <head> 内即可

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/style.css" />
  <style>
    body {
      font-family: "LxgwBright Code";
      font-weight: normal;
    }
  </style>
</head>
<body>
  
</body>
</html>

然后在 CSS 中同 Npm 中表格所示的 font-family，font-style 与 font-weight 进行调用即可。

同样如果只需某一特定的字体，可以只引入其对应分包的 CSS 文件。 | 字体 | 链接 | | --------------------------------- | ---------------------------------------------------------------------------------- | | LxgwBright Code | https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/400.css | | LxgwBright Code Italic | https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/400-italic.css | | LxgwBright Code Light | https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/300.css | | LxgwBright Code Light Italic | https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/3000-italic.css| | LxgwBright Code ExtraLight | https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/200.css | | LxgwBright Code ExtraLight Italic | https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/200-italic.css |

链接

自行部署

如果下方提供的链接连接效果不甚理想，建议自行部署并配合自己的 CDN 使用，可以直接克隆本仓库到服务端、对象存储等。

使用 CDN

目前已作为 npm 包上传到 npmjs，可以使用 npm 包的镜像链接引用。

使用 JsDelivr 对 npm 包的 CDN（推荐）

https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@latest/style.css

也可指定版本号，将链接中的 $VERSION 替换为目标版本号（但 npm 的语义化版本号会省略版本号数字开头的 0，具体版本号建议先查询 npmjs）如 2.611 或 v2.611 均可。只提供 v2.611 之后的版本，即本仓库建立时上游的最新版本。

https://cdn.jsdelivr.net/npm/@joshuasu/lxgwbright-code-web@$VERSION/style.css

lxgwbright-code cjk font webfont css

2.711.0

8 months ago

2.611.0

10 months ago