在日本开发 SaaS 产品,爱猫、爱读书、爱户外

2021-01-31 如何实现英文和中文不同字重?


一个非常简单的需求:英文使用 Roboto 字体,中文使用 Noto Serif SC 字体,但是英文的字重是 400,中文的字重是 300 。

首先,如何实现英文和中文使用不同字体?

直接把英文字体放在中文字体前面就可以了。

其次,如何实现英文和中文使用不同字重?

其实特别简单,直接只提供所需字重的字体即可。

如果你使用 Goole Font,做法如下:

1. 引入字体

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&family=Roboto&display=swap');
</style>

2. 使用字体

font-family: 'Roboto', 'Noto Serif SC', serif;