css如何加载外部字体文件

技术css如何加载外部字体文件这篇文章主要介绍“css如何加载外部字体文件”,在日常操作中,相信很多人在css如何加载外部字体文件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何加

本文主要介绍“css如何加载外部字体文件”。在日常操作中,相信很多人对css如何加载外部字体文件有疑问。边肖查阅了各种资料,整理出简单易用的操作方法,希望能帮你解答“css如何加载外部字体文件”的疑惑!接下来,请和边肖一起学习!

在css中,外部字体文件可以通过“@font-face”规则加载,语法@font-face {font-family:字体名称;Src:url(外部字体文件路径);[font-weight:厚度值];[font-style:样式值];}"。

css如何加载外部字体文件

本教程操作环境:windows7系统,CSS3HTML5第5版,戴尔G3电脑。

在css中,可以使用“@font-face”规则来加载外部字体文本。

@font-face是CSS3中的一个模块,主要是将用户自定义的Web字体嵌入到你的网页中。

通过使用@字体规则,网页设计者不再需要使用任何“网络安全”字体。

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

@font-face的语法规则:

@font-face{

Font-family:字体名称;

src 3360 source[format][,source[format]]*;

[font-weight : weight];

[font-style : style];

}font-family:字体名称:自定义字体的名称(通常设置为导入的字体名称),在后续的样式规则中会用来引用该字体。

Src:设置字体的加载路径和格式,用逗号分隔多个加载路径和格式。

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

格式:字体的格式,主要用于浏览器识别。一般有以下几种:—— Truetype、OpenType、Truetype-AAT、Embedded-OpenType、AVG等。

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

1.首先,下载字体并放入字体目录。

2.使用@font-face规则来引入字体,并给名称起一个合适的名字。

@font-face{

font-family : ' font name regular ';

src : URL(' font name . eot ');

src:local('fontnameRegular '),

本地(' fontname '),

url('fontname.woff ')格式(' woff '),

url('fontname.ttf ')格式(' truetype '),

url('fontname.svg#fontname ')格式(' SVG ');

}3.使用刚刚定义的字体。

H2 {font-family:字体名称正则}至此,“css如何加载外部字体文件”的研究结束,希望能解决大家的疑惑。理论和实践的结合可以帮助你学得更好。去试试吧!如果你想继续学习更多的相关知识,请继续关注网站,边肖会继续努力,给大家带来更多实用的文章!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/80634.html

(0)

相关推荐

  • 将来时态的5种句型,写出五个将来时和过去时的句子

    技术将来时态的5种句型,写出五个将来时和过去时的句子首先厘清时态的概念将来时态的5种句型,时和态是分开的。时,分为现在,过去,将来,过去将来。一共四个时。态,分为一般,进行,完成,完成进行。一共四个态。
    虚拟语气的本质就

    生活 2021年10月20日
  • flex和flash(flex与flash)

    技术Flex与Flash的关系是什么这篇文章主要介绍Flex与Flash的关系是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Flex简介Flex通常是指AdobeFlex,是最初由Macro

    攻略 2021年12月14日
  • 小2寸照片尺寸是多少,二寸登记照片的尺寸是多少

    技术小2寸照片尺寸是多少,二寸登记照片的尺寸是多少二寸照片尺寸是小2寸照片尺寸是多少:3.5*5.3cm。 其他照片尺寸: 1、小2寸(护照)照片尺寸是: 3.3*4.8cm 390*567像素。 2、小2寸 (普通)照

    生活 2021年10月20日
  • 如何使用torch.le和le(其他)

    技术torch.le和le(other)怎么使用本篇内容主要讲解“torch.le和le(other)怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“torch.le和

    攻略 2021年12月24日
  • 关于Java和.Net的感想有哪些

    技术关于Java和.Net的感想有哪些本篇文章给大家分享的是有关关于Java和.Net的感想有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

    攻略 2021年12月2日
  • 如何进行Java反编译插件的安装和使用

    技术如何进行Java反编译插件的安装和使用今天就跟大家聊聊有关如何进行Java反编译插件的安装和使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。在开发过程中,如

    攻略 2021年11月10日