How to introduce external fonts in css? css font style setting method (example)

In browser display, different font styles on the page not only improve the beauty of the page, but also improve the user's browsing interactivity. So how are these different font styles set with css? This chapter will show you how to introduce external fonts in css? CSS font style setting method (example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is the function and usage of the font-family attribute?

1. The role of the font-family attribute

The font-family attribute allows you to use css code to set the font style for text display on the page. For example: Song Dynasty, Microsoft Yahei, etc. The font-family attribute sets different fonts to make the page display more coordinated and beautiful.

The font-family attribute can define multiple values ​​(fonts), separated by commas. If the browser does not support the first font, it will try the next one until one is recognized. The browser will use the first value it recognizes.

2. Usage of font-family attribute

font-family:"设置字体名称";

Example:

css code:

.demo{ font-family:"微软雅黑";}

html code:

<div class="demo">我是一段测试文字</div>

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

2. How to introduce external fonts into CSS?

Commonly used fonts in general browsers include: Song, Hei, Microsoft YaHei, etc. Because when the web page is loaded and the font is selected, the text font in the visitor's system text library is called. If the font is not found, the default web 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, we can reference some external fonts to display personalized and good-looking text styles.

How to introduce external fonts in CSS (@font-face):

##1.@font-face tag introduction

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

2. Steps for introducing external fonts into CSS

1) Introduce the font into CSS and customize a name for the external font

@font-face {
    /* font-properties */
    font-family: 用户自定义的字体名称;
    src:url('加载外部字体文件的文件地址'),  
    url('加载外部字体文件的文件地址'),
    url('加载外部字体文件的文件地址'); /* IE9 */
}

font- Family defines the name of the font, and the following src is the location where the font file is loaded. The reason why there are multiple URLs is because of browser compatibility issues.

2) Use the font just defined

div {
    font-family: 用户自定义的字体名称;
}

Code example:

@font-face {
	 font-family: 'YaHei Consolas Hybrid';
	src: url('../fonts/yaheiconsolashybrid.ttf');
}

body {
	font-family: 'YaHei Consolas Hybrid';
	font-size: 16px;
}

Considering that the formats of fonts in different browsers are different ( Compatible with browsers)

/*字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、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;
}

3. Benefits of introducing external fonts into CSS:

With the continued popularity of @font-face , resulting in many new font format icon sets, called web fonts. These web fonts have the following advantages over ordinary safe fonts:

1) They use real text instead of pictures. Zooming in and out will not affect the rendering effect and the user experience is good;

2) Can be recognized by search engines;

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

The above is the detailed content of How to introduce external fonts in css? css font style setting method (example). For more information, please follow other related articles on the PHP Chinese website!