响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例2-2@font-face用法

代码

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@font-face用法title>
<style>
    @font-face{
        font-family:myFont;
        src:url("css/fonts/书法.ttf");
    }
    div{
        font-family: myFont;
        font-size: 4em;
    }
style>
head>

<body>
    <div>
    使用@font-face,应用漂亮的Web字体
    div>
body>
html>

上述代码中:
@font-face属性设置了自定义字体,font-family属性表示为自定义体取的名字,src属性用来设置文件的路径,“书法.ttf”为字体文件。可以根据个人的喜好下载自己喜欢的字体。
第12~13行对页面文字进行了字体设置。

运行效果

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例2-2@font-face用法_第1张图片
@font-face是CSS3的新属性,用于定义服务器字体。通过@font-face属性,开发者可以使用用户计算机未安装的字体。

你可能感兴趣的:(前端,html5,css3)