How to reference external ttf fonts in CSS?

How to reference external fonts in CSS?

In CSS, you can use the font-face attribute to reference external fonts. The font-face attribute can implement the call of any external special font, such as: .ttf font.

In the new font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file.

If you need to use a font for an HTML element, please reference the name of the font (myFirstFont) through the font-family attribute.

font-face attribute refers to the ttf font example:

Example 1:

<style> 
@font-face
{
font-family: myFirstFont;
src: url(&#39;aa.ttf&#39;),
     url(&#39;aa.eot&#39;); /* IE9+,可以是具体的实际链接 */
}
div
{
font-family:myFirstFont;
}
</style>

Example 1:

@font-face
{
font-family: myFirstFont;
src: url('aa.ttf'),
     url('aa.eot'); /* IE9+ */
font-weight:bold;
}

font-face attribute support for browsers:

Firefox, Chrome, Safari and Opera support .ttf (True Type Fonts) and .otf (OpenType Fonts) type fonts.

Internet Explorer 9 supports the new font-face rules, but only supports .eot type fonts (Embedded OpenType).

The above is the detailed content of How to reference external ttf fonts in CSS?. For more information, please follow other related articles on the PHP Chinese website!