GitHub - chawyehsu/lxgw-wenkai-webfont: webfont package for the LXGW WenKai type...
source link: https://github.com/chawyehsu/lxgw-wenkai-webfont
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
lxgw-wenkai-webfont
A webfont package for the LXGW WenKai typeface.
For more information about the typeface, see LXGW WenKai's website.
Usage
Use NPM
First, install the package via npm or yarn.
npm install --save lxgw-wenkai-webfont
# or Lite version
npm install --save lxgw-wenkai-lite-webfont
# or TC version
npm install --save lxgw-wenkai-tc-webfont
# or Screen version
npm install --save lxgw-wenkai-screen-webfont
Then import style.css
to your main css style file and update the font-family.
@import 'lxgw-wenkai-webfont/style.css';
/* Lite version */
@import 'lxgw-wenkai-lite-webfont/style.css';
/* TC version */
@import 'lxgw-wenkai-tc-webfont/style.css';
/* Screen version */
@import 'lxgw-wenkai-screen-webfont/style.css';
body {
font-family: "LXGW WenKai", sans-serif;
/* Lite version */
font-family: "LXGW WenKai Lite", sans-serif;
/* TC version */
font-family: "LXGW WenKai TC", sans-serif;
/* Screen version */
font-family: "LXGW WenKai Screen", sans-serif;
}
/* Mono font (optional) */
pre,code {
font-family: "LXGW WenKai Mono", sans-serif;
/* Lite version */
font-family: "LXGW WenKai Mono Lite", sans-serif;
/* TC version */
font-family: "LXGW WenKai Mono TC", sans-serif;
}
Use CDN
Put the jsDelivr <link>
into your html head, then update the font-family.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<!-- Lite version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<!-- TC version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<!-- Screen version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.css" />
<style>
body {
font-family: "LXGW WenKai", sans-serif;
/* Lite version */
font-family: "LXGW WenKai Lite", sans-serif;
/* TC version */
font-family: "LXGW WenKai TC", sans-serif;
/* Screen version */
font-family: "LXGW WenKai Screen", sans-serif;
}
</style>
</head>
<body>
<!-- blablabla -->
</body>
</html>
Use specific font weights
You can also include specific weights if you don't want to use all the font weights or don't want to use mono font. For example:
@import 'lxgw-wenkai-webfont/lxgwwenkai-regular.css';
@import 'lxgw-wenkai-webfont/lxgwwenkai-bold.css';
body {
font-family: "LXGW WenKai", sans-serif;
}
Lite version and TC version also support the same way. To know what css modules are available, please check out the npm package.
License
lxgw-wenkai-webfont © Chawye Hsu. Released under the MIT License.
The LXGW WenKai typeface is available under the SIL Open Font License 1.1 license.
Blog · GitHub @chawyehsu · Twitter @chawyehsu
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK