How to customize fonts in css

How to customize fonts in css: 1. Download the font file; 2. Use the "@font-face" rule and font-family, src attributes to introduce the font file, the syntax "@font-face{ font-family: 'Font name';src:url('File address');}".

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

When we browse some foreign personal websites, we can always find some very personalized fonts, such as

. However, because the fonts installed on the computer are limited, many times we cannot find them. When we find the font we want, we need to use @font-face provided by css3 to implement personalized fonts.

But it is inaccurate to say that @font-face is a new feature in CSS3, because this feature was already supported in CSS2, and IE browser also supported it at that time, but other browsers still not support. At present, all major browsers already support this new feature. How to use this feature specifically? Look at the code below:

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
    @font-face{
            font-family:myFont;
            src:url(&#39;rajdhani-bold.ttf&#39;)，url(&#39;rajdhani-bold.eot&#39;);
        }
        p{
            font-family: myFont;
        }
    </style>


    <div>
        <p>Ha,those words will be changed.</p>
    </div>

First: We need to introduce @font-face in css, and use font-family to set the font name you want. Here I use it as myFont (of course you can also is yourFont etc. etc.).

Second: We need to download the fonts we like. But you should know: Firefox, Chrome, Safari, and Opera support .ttf (True Type Fonts) and .otf (OpenType Fonts) type fonts. And Internet Explorer 9 supports the new @font-face rule, but only supports .eot type fonts (Embedded OpenType).

Font Squirrel (https://www.fontsquirrel.com/) This free font resource website has many fonts for download, most of which are fonts in otf and ttf formats. In addition, defont.com (http://www.dafont.com/) is also a free font resource website, and the downloaded format is generally ttf.

Obviously, the main fonts downloaded from these two websites are not compatible with IE browser. For this purpose, we can use the TTF to EOT Font Converter (https://www.kirsle.net/wizards/ttf2eot.cgi) font conversion tool to convert fonts in ttf format to eot format to be compatible with IE browsers.

But the best font conversion tool is the generator provided by Font Squirrel (https://www.fontsquirrel.com/tools/webfont-generator). After entering, select the expert option to achieve various font formats. converted between.

Third: After downloading, decompress the file and convert it into an eot format compatible with IE through the font conversion tool. For example, use src:url("rajdhani-bold.ttf"), url("rajdhani-bold.eot"); to import the font, where the url is a relative path or an absolute path.

Fourth: At this time, we can add our own personalized fonts through font-family in css.

This is the text before using the custom font:

This is the text after using the custom font:

(Learning video sharing: css video tutorial)

The above is the detailed content of How to customize fonts in css. For more information, please follow other related articles on the PHP Chinese website!