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

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

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自定义字体

暂无留言

发表评论:

◎欢迎您的参与讨论。