css如何加载外部字体文件

这篇文章主要介绍”css如何加载外部字体文件”,在日常操作中,相信很多人在css如何加载外部字体文件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“css如何加载外部字体文件”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在css中,可利用“@font-face”规则来加载外部字体文件,语法@font-face{字体类型:字体名称,src: url(外部字体文件路径);[粗细:粗细值];[字体样式:样式值);}”。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

在css中,可利用“<代码> @font-face>

<代码> @font-face>

通过使用@font-face规则,Web设计师不必再使用任何一种“网络安全”字体。

在@font-face规则中,您必须首先定义字体名称(例如myFirstFont),然后指向字体文件。

<强> @font-face的语法规则:

@font-face  { 　　,,,,,字体类型:,字体名称; 　　,,,,,src:, & lt; source>, [& lt; format>] [& lt; source>, [& lt; format>]] *; 　　,,,,,(粗细:& lt; weight>); 　　,,,,,(字体样式:& lt; style>); 　　,,,} <李>

<代码>字体类型:字体名称:自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。

<李>

<代码> src>

srouce:字体的加载路径,可以是绝对或相对URL。

格式:字体的格式,主要用于浏览器识别,一般有以下几种,truetype opentype, truetype-aat, embedded-opentype, avg等。

<强> css使用外部字体文件的方法

1,首先要下载好字体,并且放在了字体目录下

2,使用@font-face规则引入字体并给名字取一个合适的名字

@font-face  { 　　,字体类型:& # 39;fontnameRegular& # 39;; 　　,src: url (& # 39; fontname.eot& # 39;); 　　,src:本地(& # 39;fontname 定期# 39;), 　　,,,,,,,当地(& # 39;字体名# 39;), 　　,,,,,,,url (& # 39; fontname.woff& # 39;),格式(& # 39;woff # 39;), 　　,,,,,,,url (& # 39; fontname.ttf& # 39;),格式(& # 39;truetype # 39;), 　　,,,,,,,url (& # 39; fontname.svg #字体名# 39;),格式(& # 39;svg # 39;); 　　}

3,使用刚刚定义的字体

h2{字体类型:fontnameRegular}

到此,关于“css如何加载外部字体文件”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

css如何加载外部字体文件