美文网首页
如何在网页中嵌入自己想要的字体

如何在网页中嵌入自己想要的字体

作者: 高阳刘 | 来源:发表于2018-02-23 10:57 被阅读0次
通过CSS的@font-face属性来实现在网页中嵌入任意字体

1、 获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体

.TTF或.OTF,适用于Firefox 3.5、Safari、Opera
.EOT,适用于Internet Explorer 4.0+
.SVG,适用于Chrome、IPhone

2、浏览器兼容
使用CSS3的@font-face属性可以实现在网页中嵌入任意字体,但是IE只支持微软自有的EOT格式字体,而其他浏览器都不支持这一字体格式,其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体

下面要解决的是如何获取到某种字体的这三种格式文件。一般地,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF 文件,我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取

获取到三种格式的字体文件后,下一步要在样式表中声明该字体,并在需要的地方使用该字体。
  字体声明如下:

<style type="text/css">  
@font-face {  
 font-family: MyCustomFont;  
 src: url("Quasart.eot") /* EOT file for IE */  
}  
@font-face {  
 font-family: MyCustomFont;  
 src: url("Quasart.ttf") /* TTF file for CSS3 browsers */  
}  
</style>   
/*其中fontName替换为你的字体名称 - www.86y.org*/  
p { font: 13px MyCustomFont, Arial, sans-serif;}  
h1{font-family: MyCustomFont}
<p style="font-family: MyCustomFont">态度决定一切</p>  

相关文章

  • 如何在网页中嵌入自己想要的字体

    通过CSS的@font-face属性来实现在网页中嵌入任意字体 1、 获取要使用字体的三种文件格式,确保能在主流浏...

  • 关于CSS3的一些冷门属性

    有的时候是不是想在自己的网页中,用自己设计的字体呢?那么请看下面! 嵌入web字体 能够加载服务器的字体文字,让客...

  • CSS3 @font-face属性

    font-face是css3中允许使用自定义字体的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。到了今...

  • font-face 详解

    @font-face 是 CSS3 的一个模块,其主要作用是可将自定义字体嵌入到网页中,让网页字体的运用不只是限定...

  • font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-fac...

  • @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中1、@font-face...

  • 关于字体的应用

    设置服务器字体 如果说,我们想要使用自已想要的字体在html中应用,并且上传到服务器之后,别人打开网页看到的字体也...

  • javascript语法

    1、JavaScript的特点 2、在head或者body中引用 3、如何在网页中嵌入script 4、JS的输出...

  • JavaScript 入门(一、JavaScript变量运算符)

    网页中插入JavaScript脚本的方法 使用 标记将脚本嵌入到网页中(嵌入式) 直接将脚本嵌入到HTML标记的事...

  • 浏览器环境概述

    JavaScript代码嵌入网页的方法 JavaScript代码只有嵌入网页,才能在用户浏览网页时运行。 网页中嵌...

网友评论

      本文标题:如何在网页中嵌入自己想要的字体

      本文链接:https://www.haomeiwen.com/subject/blbtxftx.html