One thing that often makes designers and front-end developers headaches is the use of fonts, and designers often use some pretty fonts in their designs to achieve a cool interface. But this often makes coding people difficult, if you discard the use of these fonts in the page, designers will be depressed, and if you use these fonts, you need to cut the map and use a lot of extra style-another fish and bear the choice. Fortunately, there are a number of related alternative technologies now.
1. @font-face
CSS3 's @font-face attributes (actually introduced in CSS2) give us some hope, and Firefox 3.5 's new support for @font-face gives us a bit more of this hope.
So far, there have been safari, Chrome, Opera 10 and Firefox 3.5 support @font-face, and, more surprisingly, the IE series browsers also partially support this attribute. Other products from Mozilla, SeaMonkey 2 and Thunderbird 3 also support this property.
Browser compatibility
| Browser | Minimum version | Support Fonts |
| Internet Explorer | 4.0 | Only OpenType fonts are supported (EOF format) |
| Firefox (Gecko) | 3.5 (1.9.1) | TrueType (TTF format) and OpenType fonts |
| Opera | 10.0 | TrueType and OpenType fonts |
| Safari (WebKit) | 3.1 (525) | TrueType and OpenType fonts |
As can be seen from the table, ie browser does not support TTF format fonts, only support the EOF format, however, Microsoft officially released a weft tool, you can convert TTF to EOF, the need for friends to download and use.
The styles you can use are as follows:
@font-face {
font-family: qianduanNet;
font-style: normal;
font-weight: 400;
src: url("SketchRockwell.ttf");
}
.fontFace{
font-family: qianduanNet;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}
The styles in IE are as follows:
@font-face {
font-family: Goudy Stout;
font-style: normal;
font-weight: 400;
src: url(GOUDYST0.eot);
}
This is the easiest way to implement an embedded font at the moment.
@font-face Resources:
CSS3 Series Tutorials: Embedding fonts/Network fonts
Mozilla Developer Center: @font-face
Web fonts with @font-face
SIFR
sIFR is not a new technology, but it has existed and been in use for many years. sIFR is a useful and handy text replacement technology that embeds network fonts into the page by FLASH+JS+CSS.
Considering the internet has a lot of resources, this article will not repeat, want to know friends can refer to the article:
How and when to use SIFR
sifr-Text Replacement Technology
sifr--Baidu Encyclopedia
Typeface.js
Typeface is considered to be the best alternative to SIFR, compared to sifr,typeface less flash applications, using pure JS to embed related fonts, but also very simple to use: in the page to introduce the corresponding JS file OK.
<!-- 加载所有的样式先 -->
<link rel="stylesheet" type="text/css" ref="/style.css">
<!-- 再加载typeface.js 库文件和typeface.js字体文件-->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
<body>
<!-- 继续并使用CSS指定typeface.js 字体 -->
<div class="myclass typeface-js" style="font-family: Helvetiker">
文本文本...
</div>
</body>
From what we can see, using typeface requires only a few simple steps to use embedded fonts in the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
