CSS3嵌入字体@font-face

来源:互联网 发布:java 实参 编辑:程序博客网 时间:2024/05/23 19:20

@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

语法:

@font-face {    font-family : 字体名称;    src : 字体文件在服务器上的相对或绝对路径;}

这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。

比如:

p {    font-size :12px;    font-family : "My Font";    /*必须项,设置@font-face中font-family同样的值*/}
实例代码:

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>嵌入字体</title><style type="text/css">@font-face{    font-family: "MOOC Font";    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");}.demo {    width: 340px;    padding: 30px;        color: #566F89;    background: #000;    font-size:58px;    font-family: "MOOC Font";}</style>  </head> <body><div class="demo">IMOOC</div></body></html>


0 0
原创粉丝点击