This article is reproduced from:

Frank Septillion: https://www.septillion.cn/archives/2560

Siyuan Song Typeface, how to evaluate it, and how to use it correctly

On April 3, 2017, Adobe and Google released Siyuan Song Typeface. Siyuan SongTi is a sibling font of Siyuan HeiTi. It also supports four languages: Traditional and Simplified Chinese, Japanese, and Korean. It also contains seven font weights. It also uses OFL free authorization and is open source on GitHub. Among them, the Chinese part is designed by Changzhou Huawen in my country, which follows the GB 18030 general standard Chinese character list, including 8105 standard characters and 196 extra characters.

how to evaluate

The contribution of Siyuan Songti to the world of Chinese fonts is no less than that of Siyuan Heiti.

If the operating system does not have a suitable font to display the corresponding character, it will be displayed as "tofu block". Google hopes to bid farewell to the existence of "tofu" by letting the open source Noto font family cover all Unicode characters, and the "Siyuan" series of fonts is the Noto font family for Chinese, Japanese and Korean (Chinese, Japanese, Korean, CJK) important subset of . The previous Siyuan HeiTi was a sans-serif font, but this time Siyuan SongTi is a serif font.

The most notable feature of the "Siyuan" series of fonts is its open source and free licensing method, even for commercial use without restrictions. This authorization method can maximize the popularity of "Siyuan", and later Google built it into Android, you may have become a beneficiary of Siyuan fonts without knowing it.

However, it is too narrow to summarize the contribution of Siyuan fonts. As mentioned above, Siyuan font is a font for four fonts, which means that Siyuan can perfectly display the variants of the same Chinese character in different languages, so that people in the four regions will not find it strange.

Siyuan font also supports seven weights, which is unprecedented in the history of Chinese fonts. Before Siyuan fonts, most Chinese fonts had only two weights (regular, bold), and Microsoft Yahei had three weights (thin, regular, bold). Apple's "Pingfang" font released later supports six weights, and it is not as rich as Siyuan font.

In addition, the Adobe Typekit service also allows you to use the Siyuan series of fonts on your website for free, although the free package has a certain traffic limit.

Compared with the built-in Song typeface of the macOS system, Siyuan Song typeface not only has a richer font weight, but also has a larger font size and slightly better readability. The Windows built-in Arial is directly out of the game with a negative score. Compared with the sans-serif fonts such as Siyuan HeiTi, Siyuan Arial is more suitable for formal documents and feels more solemn.

It should be pointed out that since Siyuan fonts are jointly developed and distributed by Google and Adobe, although the Chinese names are the same, there is no unified English name. Google puts Siyuan fonts into its Noto font family, so the name of Siyuan HeiTi is Noto Sans CJK, and the name of Siyuan SongTi is Noto Serif CJK; Adobe puts Siyuan fonts into its Source font family, so the name of Siyuan HeiTi is Source Han Sans , the name of Siyuan Song typeface is Source Han Serif. The impact of this is explained later.

Siyuan fonts also have built-in Western characters, and the Western part uses Adobe Source family fonts, namely Siyuan HeiTi integrated Source Sans Pro and Siyuan SongTi integrated Source Serif. This is true regardless of the version released by Google or Adobe.

How to use it correctly

Download page: GitHub, Google

use locally

Adobe provides a multilingual download guide (PDF), the Chinese part is shown in the figure below

After downloading the corresponding version, you can install it.

On Windows 10, double-clicking to open a font gives you the option to install it. In Windows 8 and earlier versions, you need to open Control Panel - Appearance and Personalization - Fonts, and drag the downloaded fonts into it.

On macOS, you can choose to install a font by double-clicking it to open it.

In iOS 7 and above, installing fonts requires downloading AnyFont or WorkFlow from the App Store. The specific method can refer to this article of mine. iOS 6 and earlier versions do not support installing fonts.

Until Android 7.1, Google didn't allow users to install fonts. Some ROMs allow users to replace the system default font, please consult the relevant customer service for details.

As mentioned above, the Western part of Siyuan Font uses Adobe Source family fonts, so if you want to use it with the Noto font family, you need to explicitly declare that you will use Noto fonts in the Western part.

use in web pages

Siyuan is such a powerful font, of course some webmasters want to use it. My blog has already used Siyuan Arial in the title, and it will not look ugly on most browsers.

It has always been difficult to use Chinese fonts on web pages. The main reason is that Chinese fonts are often too large. Western fonts can generally solve the problem at about 100 KB, while Chinese fonts range from a few MB to hundreds of MB. This can seriously slow down your site's loading speed. Probably for this reason, Google Font does not host Siyuan fonts either.

Fortunately, the Adobe Typekit service provides hosting for Siyuan fonts. You only need to register an Adobe account to use Siyuan series fonts for free. There will be some restrictions on the amount of access for free accounts, and there will be a fee to upgrade accounts. But for a personal blog, a free account is more than enough.

You can follow Adobe's official instructions to create an account, add fonts to the kit, and add the corresponding JavaScript script to the <footer> of the page. Typekit scripts will load fonts after the web page is loaded, and only load the required characters as needed, greatly improving the speed. But even so, the loading of Chinese fonts will still be relatively slow, so it is not recommended to use dynamic fonts for large texts. It is better to use system built-in fonts for the text of the article. Typekit uses the Akamai CDN service, and the speed in China is unsatisfactory (unsatisfactory: generally satisfactory).

Here we mainly talk about how to correctly declare Siyuan fonts in CSS. As mentioned above, there are multiple versions of Siyuan fonts, and different names are used for different operating systems and languages. So correctly declaring Siyuan fonts in CSS code needs to consider all Siyuan font versions.

Siyuan Blackbody

'Noto Sans CJK SC', 'Noto Sans CJK', 'Source Han Sans', source-han-sans-simplified-c, sans-serif;

Such a statement allows the browser to call the Siyuan black body installed in the system first, and then load it from the network if it is not available. If the network also fails to load, it will fall back to the system default sans serif font. The built-in western text of Siyuan HeiTi is Adobe Source Sans Pro.

Siyuan Blackbody + Google Noto Sans

'Noto', 'Noto Sans CJK SC', 'Noto Sans CJK', 'Source Han Sans', source-han-sans-simplified-c, sans-serif;

Siyuan Song Typeface

'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, serif;

The built-in western font of Siyuan SongTi is Adobe Source Serif.

Siyuan Song Typeface + Google Noto Serif

'Noto Serif', 'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, serif;

Use with other fonts

Adding Western fonts immediately after font-family can replace the built-in Western fonts of Siyuan fonts; adding Chinese fonts before the ending serif can add fallback fonts, but generally it is not necessary.

my usage

I use Siyuan Arial in the title of the website, with a font weight of up to 900. This type of font weight can only be provided by Siyuan Song Typeface, and no other Song Typeface can achieve such a rich font weight. If Siyuan Arial has been installed in the system, the local font is preferred. If not installed locally, download it from Typekit. If the Siyuan Song typeface download fails, look for the Song typeface in the system to use.

In the body of the website, I use Siyuan Heiface as the final fallback font. When Pingfang, SiyuanHeiTi or Microsoft Yahei have been installed in the system, these three fonts are used in sequence, and the dynamic SiyuanHeiTi will not be downloaded from Typekit. If the above-mentioned fonts are unfortunately not available in the operating system (such as Android, Ubuntu, etc.), then download Siyuan Heiti. If Siyuan Heiti fails to download, it will fall back to the system default sans-serif font.

This usage balances style and loading speed.

This article is reproduced from:

Frank Septillion: https://www.septillion.cn/archives/2560