rabithua

rabithua

twitter
github
HomeArchivesFriends

The website introduces its own Chinese font.

#解决办法#web64
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The issue involves a website displaying default fonts instead of the intended custom fonts due to the original author's use of a locally compressed font that did not include the necessary characters. To resolve this, follow these steps: 1. Obtain the desired font file (TTF). 2. Use a font compression tool (like font-spider) to compress the font. 3. Upload the resulting font folder to your website's root or another accessible directory. 4. Add a link to the font in the website's header. 5. Apply the font to your text using the appropriate CSS style. This process will ensure the correct font displays on your website.

Problem#

The void theme itself references its own font, and the author's website displays the font correctly, but the banner font on my own website is the default font. Initially, I thought it was due to an error in the Google API reference, but after much investigation, I learned that the original author referenced a local font, and importantly, this local font was compressed.

In simple terms, the original Chinese font files are often several megabytes in size, and loading such large font files on a website is clearly impractical, so a method has emerged to merge the required characters into a smaller font file.

The compressed font from the original author does not contain the characters I need, so it cannot display correctly.

Solution (General)#

  1. Find the font file (ttf) you want to use.

~~ 2. Go to this website (lcddjm) to compress the font the website is no longer valid ~~

  1. Use font-spider to compress the font.

lcddjm

  1. After decompressing the compressed font file, you will get a font folder. Upload this folder to the root directory of your website, or it can be in another directory, as long as you can write the correct URL. (https://xxxx.com/font/font.css)

  2. Next, add a link in the head of your website.

<link rel="stylesheet" href="https://xxxx.com/font/font.css">

  1. The font source has been successfully introduced, now add the style (font-family: font;) to the text you want to use the font for.

  2. Shout out {{Nagano is so handsome han chang ye}}, problem solved~ :@(献花)

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.