如何在网页中嵌入个性字体?

编程入门 行业动态 更新时间:2024-10-19 07:32:04

如何在网页中嵌入个性<a href=https://www.elefans.com/category/jswz/34/1770720.html style=字体?"/>

如何在网页中嵌入个性字体?

方案一、CSS:@font-face

这是CSS2中就已存在的一个属性(规则)。

语法:

font-face { font-family : name ; src : url ( url ) ; sRules }

说明:

1  
2
3
4
5
6
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType
字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据,可以用来提供
HTML文档使用该字体,或取代客户端系统已有的同名字体。此文件可以使用Microsoft WEFT工具制作。
到现在为止,已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了,
比较意外的是,IE系列浏览器也部分支持该属性。

@font-face {font-family: MyHelvetica;src: local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),url(MgOpenModernaBold.ttf);font-weight: bold;font-style: normal;
}
.fontFace{font-family: MyHelvetica;
}

IE中的用法:

@font-face|font-family: Goudy Stout;font-style: normal;font-weight: 400;src: url(GOUDYST0.eot);
}


方案二、利用Google Font API

此方案准确来说应该是对方案一的补充,因为实际上它还是使用@font-face来实现,只是url资源使用Google Font API库中的字体。

Google Font API调用起来非常方便,你可以用比较直接的方式:


或者你比较懒,就可以用这种方式:

<link rel="stylesheet" type="text/css" href="=Tangerine">
<style>body {font-family: 'Tangerine', serif;font-size: 48px;}</style>
</link>





更多推荐

如何在网页中嵌入个性字体?

本文发布于:2024-03-05 16:09:29,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1712756.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:字体   网页   个性   如何在

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!