How to use the locally installed 'Jingnan Mai Round Body' on a web page and solve the display problem?

Troubleshooting of local font applications and display issues on web pages

In web design, it is often necessary to use specific fonts to improve visual effects. This article takes "Jingnan Mai Round" as an example to explain how to apply local installed fonts on web pages and solve possible display problems.

Assume that the user has installed "Jingnan Mai Round" in the system, but hopes to encounter display problems when using the font on the website. Its CSS code is as follows:

 /*@font-face {
    font-family: 'myfont';
    src: url('/style1/font/Jingnanmai round body.otf') format('truetype');
}*/
html, body{font-size:18px;font-family:"Jingnan Mai Round Body", "Microsoft Yahei", "helvetica neue", helvetica, arial, sans-serif;}

The web page shows "Microsoft Yahei" instead of "Jingnan Mai Round Body". The user has made it clear that the font only needs to be displayed locally, and because the font file is large, it does not want to be introduced through src attribute.

Solution:

The key is to adjust the CSS code, load and apply the local font correctly.

First, modify font-family property. Will:

 font-family:"Jingnan Mai Round Body", "Microsoft Yahei", "helvetica neue", helvetica, arial, sans-serif;

Change to:

 font-family:"myfont", "Microsoft Yahei", "helvetica neue", helvetica, arial, sans-serif;

Secondly, enable and correct the @font-face rule to ensure that the "Jingnan Mai Round Body" is loaded correctly:

 @font-face {
    font-family: 'MyFont'; /* Pay attention to upper and lower case*/
    src: local('Jingnan Mai Round'); /* Declare local font using local()*/
}

The local() function tells the browser to prioritize finding local installed fonts. If the font is not installed locally, the browser will continue to use the fallback font ("Microsoft Yahei" etc.).

Finally, clear the browser cache or restart the browser to make the CSS changes take effect. After following the above steps, the web page should successfully display "Jingnan Mai Round Body" in the local test environment.

The above is the detailed content of How to use the locally installed 'Jingnan Mai Round Body' on a web page and solve the display problem?. For more information, please follow other related articles on the PHP Chinese website!