Font usage is an indispensable 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 for mainstream operating systems, so that users may not be able to see the real design when browsing the page. The most common way for art designers to do is to make the desired text into pictures. This has several obvious flaws: 1. It is impossible to use the font on a large scale; 2. The image content is relatively difficult to modify; 3. No Favorable to website SEO (mainstream search engines will not use image alt content as an effective factor in judging the relevance of web page content). There are some methods on the Internet that use sIFR technology or javascript/flash hack, but the implementation is either cumbersome or flawed. What we want to talk about below is how to embed any font in a web page only through the @font-face attribute of CSS.
first step
Get the three file formats to use the font to ensure that the font can be displayed normally in mainstream browsers.
.TTF or .OTF, suitable for Firefox 3.5, Safari, Opera
.EOT, for Internet Explorer 4.0+
.SVG, suitable for Chrome, IPhone
What we want to solve below is how to obtain these three format files of a certain font. Generally, we have some format file for that font at hand (or already found at the design resource site), the most common of which is a .TTF file, which we need to convert to the remaining two file formats through this file format. The 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 required characters to generate font files (the last option of the service), which greatly reduces the size of the font files and makes this solution more practical.
Step 2
After obtaining the font file in three formats, the next step is to declare the font in the style sheet and use the font where it is 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');
}
/* where fontName is replaced with your font name*/
Use this font where you need it on the page:
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}
or
<p style="font-family: fontNameRegular">Snuggle the moon in your hands, and the fragrance of fallen flowers fills your clothes</p>
Here is an example I did through the above two steps:
Run the 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>Complete solution for embedding any font in web pages - 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>Complete solution for embedding any font in web pages - CSS9.NET</h1>
<h2>Access the original text: <a href="http://css9.net/css-font-face-solution/">http://css9.net/css-font-face-solution/</a>  ; Follow the web front-end development- <a href="http://css9.net">CSS9.NET</a></h2>
<div id="poem">
<h3>Cloud is vegetarian</h3>
<p>There are classmates in the capital, and we meet in the Vegetarian Pavilion. </p><p>The listener is still not finished, but the person who speaks has already spoken a lot. </p><p>There are friends all over the room, and I will talk about the civil sciences. </p><p>Send small words in Zen, be careful and gentle. </p>
</div>
</body>
</html>
[Ctrl+A All selection tips: You can modify some code first, and then press Run]
The font in the above article uses a fountain pen running script font published by this blog. If you like it, you can download it.
Download the source code for this example: Web page embed font example
Original text: http://css9.net/css-font-face-solution/