How to use locally installed 'Jingnanmai Round' on a web page without loading the font file?

Methods to directly call local fonts for web pages

In web development, you sometimes need to use specific fonts that have been installed on the system. For example, you have installed "Jingnan Mai Round" and hope to apply them directly in the web page without additional font files loading.

You may have tried the following CSS code, but the webpage still displays the default font (such as "Microsoft Yahei"):

 /*@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;}

This is because src: url(...) method will try to load the font file from the server. To use local fonts directly, you need to modify the CSS:

1. Use @font-face and local() functions:

 @font-face {
    font-family: 'JingNanMaiYuanTi'; /* It is recommended to use English font names*/
    src: local('Jingnan Mai Round Body');
}

The local() function tells the browser to find local installed fonts. Note that the font name is changed to the easier-to-use English name JingNanMaiYuanTi .

2. Update font-family property:

Modify font-family attribute in CSS and use the newly defined font name:

 html, body {
    font-size: 18px;
    font-family: 'JingNanMaiYuanTi', 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

3. Restart the browser: Restart the browser to ensure that the system font update is recognized by the browser.

Through the above steps, your web page should be able to correctly display the "Jingnan Mai Round" font without loading external font files, thereby improving the loading speed of web pages. Remember, using English font names can avoid potential coding problems.

The above is the detailed content of How to use locally installed 'Jingnanmai Round' on a web page without loading the font file?. For more information, please follow other related articles on the PHP Chinese website!