Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to introduce external fonts in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to introduce external fonts in css" this article.

1. The function and usage of font-family attribute?

The role of the 1.font-family attribute

The font-family attribute can be used to set the font style of the text displayed on the page with css code, such as Arial, Microsoft Yahi, and so on. The font-family property sets different fonts to make the page display more coordinated and beautiful.

The font-family property can define multiple values (fonts), separated by commas. If the browser does not support the first font, it will try the next font until there is a recognizable one. The browser uses the first value it can recognize.

The use of the 2.font-family attribute

Font-family: "set font name"

Example:

Css Code:

.demo {font-family: "Microsoft Acer";}

Html Code:

I am a test text.

In this way, all the text in the demo box will be displayed in Microsoft Yahei font style.

Second, how does CSS introduce external fonts?

Commonly used fonts in browsers include: song typeface, boldface, Microsoft yahei and so on. Because the font selected when the page is loaded is the text font that invokes the visitor's system font library, if the font is not found, the default page font will be displayed. The operating system installed by everyone has these fonts by default, so these fonts are also called safe fonts. But for some special needs, the display has a personalized, good-looking text style, we can quote some external fonts.

CSS's method of introducing external fonts (@ font-face):

Introduction to 1.@font-face tags

@ font-face allows you to use fonts that are not installed on your computer, completely free from the restrictions of safe fonts. Just install the font package on the server, and when the user loads the web page, the font package will be automatically downloaded to the user's machine to ensure that the font can be rendered correctly.

To introduce external fonts into 2.CSS

1) introduce fonts into CSS and customize a name for external fonts

@ font-face {

/ * font-properties*/

Font-family: user-defined font name

Src:url ('File address where external font files are loaded')

Url ('File address where external font files are loaded')

Url ('File address where external font files are loaded'); / * IE9*/

}

Font-family defines the name of the font, and the next src is the location where the font file is loaded, all of which have multiple url because of browser compatibility issues.

2) use the font just defined

Div {

Font-family: user-defined font name

}

Code example:

@ font-face {

Font-family:'YaHeiConsolasHybrid'

Src:url ('.. / fonts/yaheiconsolashybrid.ttf')

}

Body {

Font-family:'YaHeiConsolasHybrid'

Font-size:16px

}

Considering the differences in font formats among different browsers (compatible browsers)

/ * the font suffix is related to the browser, as shown below

* .TTF or .OTF for Firefox3.5, Safari, Opera

* .EOT for InternetExplorer4.0+

* .SVG for Chrome and IPhone

, /

@ font-face {

Font-family:'HansHandItalic'

Src:url ('fonts/hanshand-webfont.eot')

Src:url ('fonts/hanshand-webfont.eot?#iefix') format (' embedded-opentype')

Url ('fonts/hanshand-webfont.woff') format (' woff')

Url ('fonts/hanshand-webfont.ttf') format (' truetype')

Url ('fonts/hanshand-webfont.svg#webfont34M5alKg') format (' svg')

Font-weight:normal

Font-style:normal

}

Benefits of introducing external fonts into 3.CSS:

With the increasing popularity of @ font-face, many new sets of font format icons have emerged, called web fonts. These web fonts have the following advantages over common secure fonts:

1) using real text instead of pictures, zooming in and out will not affect the rendering effect, and the user experience is good.

2) can be identified by search engines

3) unlike images that need to be regenerated every time, it is more convenient to add and delete images.

The above is all the content of the article "how to introduce external fonts in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.