CSS3新特性网页使用自己的字体

SongKer 发布时间：2014-07-15 分类：Web 阅读：4275次添加评论

CSS3之前，网站的字体必须要浏览者用户电脑安装过才能正常显示出来，但是一般用户的电脑只安装了一般的雅黑、宋体字。每当自己开发调试的网站已经大功告成再发布到网站时候，突然看到那字体界面真是丑出翔。还好CSS3来了

根据w3cschool解释实例：当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。可以是.ttf或是.eot的字体格式。备注：IE9及以上版本支持该新特性，Chrome，Mozilla Firefox等浏览器均已支持。

代码：

<!DOCTYPE html>
<html>
<head>
    <style> 
        @font-face
        {
            font-family: myFirstFont;
            src: url('http://www.w3school.com.cn/example/css3/Sansation_Light.ttf')
            ,url('http://www.w3school.com.cn/example/css3/Sansation_Light.eot'); /* IE9+ */
        }
        div
        {
            font-family:myFirstFont;
        }
    </style>
</head>
<body>
<div>
    With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p>
    <b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
</p>
</body>
</html>

关键字词： CSS3 自定义字体

上一篇：ASP.NET后台执行网页显示等待中方法

下一篇：ASP.NET发布后版本与本地调试版本差别大