Font usage is an integral part of web design. Often, we want to use a specific font in a web page, but the font is not a built-in font of the mainstream operating system, so users may not see the real design when browsing the page. The most common method used by art designers is to turn the desired text into pictures. This has several obvious flaws: 1. It is impossible to use the font on a large scale; 2. The content of the picture is not easy to modify compared to using text; 3. It is not easy to modify the font. Conducive to website SEO (mainstream search engines will not use image alt content as an effective factor in judging the relevance of web content). There are some methods using sIFR technology or javascript/flash hack on the Internet, but they are either cumbersome or defective to implement. What I’m going to talk about next is how to embed any font in a web page only through the @font-face attribute of CSS.
first step
Obtain the three file formats of the font to be used and ensure that the font can be displayed normally in mainstream browsers.
The next thing to be solved is how to obtain these three format files of a certain font. Generally, we have a certain format file of the font on hand (or have found it on a design resource site), the most common one is a .TTF file, and we need to convert this file format to the other two file formats. Conversion of font file formats can be obtained through the online font conversion service provided by the website FontsQuirrel or onlinefontconverter. The first site is recommended here, which allows us to select the characters we need to generate font files (the last option in the service), which greatly reduces the size of the font files and makes this solution more practical.
Step 2
After obtaining the font files in three formats, the next step is to declare the font in the style sheet and use the font where needed.
The font declaration is as follows:
@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
/*Replace fontName with your font name*/
Use the font where needed in the page:
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}
or
<p style="font-family: fontNameRegular">Holding the moon in the water, the fragrance of fallen flowers fills the clothes</p>
Here is an example of what I did through the above two steps:
Run code box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A complete solution for embedding any font in a web page - CSS9.NET</title>
<link rel="stylesheet" href=" http://www.blueidea.com/articleimg/2009/12/7263/style.css " />
<style type="text/css">
@font-face {
font-family: 'hakuyoxingshu7000Regular';
src: url('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format('truetype'), url('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');
}
#poem{
font-size:45px;
font-family:hakuyoxingshu7000Regular;
text-align:center;
}
#poem p{height:30px;line-height:30px;}
</style>
</head>
<body>
<div id="testdiv">
<h1>A complete solution for embedding any font in a web page - CSS9.NET</h1>
<h2>Visit the original text: <a href=" http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a>  ;   ;Focus on Web front-end development- <a href=" http://css9.net">CSS9.NET</a></h2 >
<div id="poem">
<h3>Yunwei is a vegetarian</h3>
<p>There are classmates in Beijing and we meet at the vegetarian restaurant. </p><p>The listeners have not yet finished speaking, but the speakers have spoken too much. </p><p>The house was full of friends, talking freely about He Minke. </p><p>Send small words in Zen, speak carefully and gently. </p>
</div>
</body>
</html>
[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]
The font in the above article uses a pen cursive font previously released on this blog. If you like it, you can download it.
Download the source code for this example: Web Embed Font Example
Original text: http://css9.net/css-font-face-solution/