Using Specified Fonts on the Website

Background

Seeing recent copyright infringement issues caused by fonts, I decided to use MiSans on my own website while redesigning it.

Getting Started

Initially, I tried importing the TTF directly, but the file was too large. The massive file size severely impacted loading efficiency. So, I checked the official MiSans website for their inclusion method:

MiSans address: https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap,
The returned file looks like this:

@font-face {
  font-family: MiSans;
  font-weight: 100;
  font-display: swap;
  src: url("https://cdn-file.hyperos.mi.com/mi-font-service/misans/100/cs.ed078bc4e798bff8.0.woff2")
      format("woff2"), url("https://cdn-file.hyperos.mi.com/mi-font-service/misans/100/cs.ed078bc4e798bff8.0.woff")
      format("woff"),
    url("https://cdn-file.hyperos.mi.com/mi-font-service/misans/100/cs.ed078bc4e798bff8.0.ttf")
      format("truetype"), url("https://cdn-file.hyperos.mi.com/mi-font-service/misans/100/cs.ed078bc4e798bff8.0.eot")
      format("embedded-opentype");
  unicode-range: U+20, U+2013-2014, U+2018-2019, U+201c-201d...;
}
....;

Analyzing this code: when font-family and font-weight match, the file corresponding to src is requested. The key is unicode-range, meaning the corresponding file will only be requested when the website contains text within this range. By splitting the font file, we can significantly reduce the size of the requested resource. As for the differences between WOFF2, TTF, and other font formats, refer to:

https://www.cnblogs.com/bianchengsanmei/p/15857883.html

Using Tools to Split Font Files

• Tool: cn-font-split

• Operation:
  
  The directory structure generated after running is:
  
  We can directly import the generated result.css to use the corresponding fonts on our website. You can modify the code in this CSS if needed.

Other Notes on Fonts

1. Set multiple fonts separated by ,, and set sans-serif at the end

font-family: "MiSans Latin", "MiSans VF", sans-serif;

AI Translation | AI 翻译

This article was translated from Chinese to English by AI. If there are any inaccuracies, please refer to the original Chinese version.


本文由 AI 辅助从中文翻译为英文。如遇不准确之处，请以中文原版为准。