css中@font-face的使用

1.font-face

font-face是css3中允许使用自定义字体的一个模块,它主要是把自己定义的web字体嵌入网页中

2.font-face的用法

@font-face{font-family: <DefineFontName>; src: <url> [<format>],[<source> [<format>]], *;[font-weight: <weight>]; [font-style: <style>];
}

font-family:为载入的字体取名字

src:[url]加载字体可以是相对路径,可以是绝对路径,也可以是网络地址

[format]定义字体的格式,用来帮助浏览器识别字体,主要有以下这些格式：[truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)]

font-weight:定义加粗样式

font-style:定义字体样式

3.常见写法

@font-face { font-family: 'iconfont'; src: url('iconfont.woff2?t=1657024856610') format('woff2'), url('iconfont.woff?t=1657024856610') format('woff'), url('iconfont.ttf?t=1657024856610') format('truetype');
}

4.font-face的使用

.icon{font-family:"iconfont ";}

css中@font-face的使用相关推荐

Font Awesome html源码,CSS 中Font Awesome 图标（附码表）
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 部分图标: 其他效果图: 调用实例: Font Awesome图标调用实例 N ...
font在html语言中是什么意思,CSS中font是什么意思？
font代表字体,是CSS中的一个简写字体属性,用于一次设置元素字体的两个或更多方面,可以在一个声明中设置所有字体属性. CSS font属性 font 简写属性可在一个声明中设置所有字体属性. 说明 ...
CSS中font属性如何连写？
写在前面: 今天无意中发现了font属性是可以连写的,实在惭愧,也怪我CSS写得太少了,看到之后就去CSS小册查阅了一下,并作出相关实践. 以下面这行代码的font样式为例 <p>如何写字 ...
CSS 中font样式
font 用于在一个声明中设置所有的字体样式属性 1.必须至少有字体和大小 2.不能和line-height共生,字体大写/line-height 3.样式属性按照下面顺序排列 font-style: ...
css中font的简写
字体属性主要包括下面几个: font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族): " ...
css font size 单位,css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是 ...
css的font修改颜色,css的font字体颜色如何设置
css的font字体颜色设置方法:1.直接在标签上使用"color:颜色"设置字体颜色:2.通过给font标签添加class属性,在css标签中通过该class设置字体颜色. 本教 ...
tp view html 引用css,TP5.1：将外部资源引入到框架中（css/js/font文件）
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
CSS中对字体进行设置
在对字体设置的时候,我们可以设置字体的字体系列,字体的样式,字体的大小,字体加粗,和字体转换.下面我们来一一的对字体的这些设置进行分析. 字体系列: 在CSS中有两种类型的字体系列: 通用的字体系列: ...
我应该在CSS中使用px或rem值单位吗？
本文翻译自:Should I use px or rem value units in my CSS? I am designing a new website and I want it to be ...