[Reprint] Custom fonts in html

I found a problem in HTML today. There are many default fonts provided to us, but except for those supporting Chinese fonts such as "HeiTi", "Song Ti" and "Kai Ti", the rest do not know Chinese fonts. If we need What should I do with my favorite font? Is it possible to introduce custom downloaded fonts in CSS3? If so, how should we introduce it? With this series of problems, let’s take a look at the solution, saying that nothing is as good as looking at the effect. The following are the effects of three fonts on the web, "Spring Festival Standard Font", "Jiangnan Artistic Tune Font" and "Mao Zhedong Art" The effect of "font":

Google Chrome:

Firefox browser:

The above is the effect display, everyone can understand it!
Then we look at how to introduce it in CSS:

First of all, we have to introduce a certain font, there should be such a font (the user does not need to have), download the font and put it under the font folder of the project
Insert picture description here

Font download You can download it on the Internet or download it here . After the download is complete, we will introduce the font

HTML code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体文件测试</title>
	</head>
	<body>
		<div class="chunlian">春联标准字体测试</div>
		<div class="jiangnan">江南艺术调字体测试</div>
		<div class="maozedong"> 毛泽东字体测试</div>
	</body>
</html>

Then there is the CSS style setting:

		<style type="text/css">
			@font-face {
				font-family:'chunlian';
				src: url(font/chunlian.ttf);
			}
			@font-face {
				font-family: 'jiangnan';
				src:url(font/jiangnan.ttf);
			}
			.chunlian{
				font-family: 'chunlian';
				font-size: 50px;
				text-shadow: none;
			}
			.jiangnan{
				font-family: 'jiangnan';
				font-size: 40px;
			}
			@font-face {
				font-family: 'maozedong';
				src:url(font/maozedong.ttf);
			}
			.maozedong{
				font-family: 'maozedong';
				font-size: 50px;
				text-shadow: none;
			}
		</style>

If you add other fonts, write @font-face directly in CSS!

---------------------
Transfer Author: Mu Xiongxiong
Source: CSDN
Original: https: //blog.csdn.net/qq_34137397/article/details/83307474

[Reprint] Custom fonts in html

Guess you like