Hexo custom font

Original link: https://blog.si-on.top/2023/oh_my_font/

Overview

In today’s world, fonts [1] can be roughly divided into four categories: Song, Kai, Hei, and Yi. They have different shapes and different uses.

Song, which comes from the printing industry, has always been the most commonly used font in paper books. It is highly recognizable and full of elegance in ink and wash. Among the outstanding ones, there are Founder, Adobe-std, Siyuan, etc., and I think the best one is Siyuan Songti.

Regular script evolved from ancient handwriting and is often used for text quotations, content emphasis, and layout of ancient poems and articles. It is powerful and artistic. There are many of them, and Kaiyuan’s Xiawu Wenkai can be said to be an outstanding one.

Black is a font infiltrated with modern design ideas. It is most commonly used in electronic device UI, network layout, and code display. For example, the three major operating systems of Windows, Apple, and Linux are all based on black fonts. Among the black bodies of Kaiyuan, Wenquanyi Micron Black is the top grade.

Art, anything that does not belong to the above three, the rest are all artistic fonts. Artistic fonts are the creative creations of designers with many styles and cannot be generalized. Among them, GNU-Unifont is the most perfect among the pixel styles, and other styles such as pen and calligraphy are also popular among others.

Font selection

The main text is Song Dynasty, the title and code are in black, and the citations are in regular script. This is also LaTeX\LaTeX L A T E The original format of X is a very good reading experience. Below is a website for downloading fonts collected by me. Visitors can download and use them.

  1. Adobe open source font library
  2. google font
  3. Chinese open source font collection
  4. Chinese open source font site
  5. GNU Unifont
  6. Founder font library
  7. free font
  8. Xindi font (personal non-commercial use)

Font format

Fonts are all stored in files, and the formats are unified. Currently, TTF(TrueType Font) , OTF (OpenType Font) , WOFF(Web Open Font Format) , and WOFF2 are the mainstream ones. They are used in different scenarios and have different file sizes.

In terms of size, TTF and OTF are larger, WOFF is smaller, and WOFF2 is the smallest. There is another method, which is not to take the entire character library but only to take the characters used, then the document can be simplified.

Format conversion tools

Those who use it will write it down, those who don’t use it will not write it down.

Here is a WOFF2 generation tool: woff2

 1
2
 extra/woff2 1.0.2-4
Web Open Font Format 2 reference implementation

Extremely easy to use: woff2_compress oh_my_font.otf

 1
2
3
4
 ╭─sion@sion in ~/Download as admin took 222ms
╰─λ woff2_compress HanyiSentyYongleEncyclopedia-2020.ttf
Processing HanyiSentyYongleEncyclopedia-2020.ttf => HanyiSentyYongleEncyclopedia-2020.woff2
Compressed 5800508 to 2911822.

The size can be reduced by almost half.

Introduction of fonts

Local font introduction

Use css style here to introduce

 1
2
3
4
5
6
 @font-face {
font-family : 'yongle' ;
src : url ( /fonts/HanyiSentyYongleEncyclopedia-2020.woff2 );
font-weight : normal;
font-style : normal;
}

Introduction of web fonts

  1. google fonts
 1
 - <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@ 500 , 600 , 800 , 900 &display=swap " rel=" stylesheet ">
  1. Xiayu Wenkai
 1
 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-webfont/ 1.7 . 0 /style.min.css " />

Just change the options directly when using:

butterfly theme configuration file

 1
2
3
 font-family: "LXGW WenKai"

#font-family: "Noto Serif SC",shusong,"LXGW WenKai"

  1. The fonts discussed in this article are all open source or personal non-commercial fonts. Users still need to consider a few things to avoid unnecessary trouble. ↩

This article is reproduced from: https://blog.si-on.top/2023/oh_my_font/
This site is only for collection, and the copyright belongs to the original author.