要我来教你应⊙ω⊙用css中的字体样式标志的方式

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

最先什么叫字体样式标志呢,那么就是表层上是标志,实际上它是文本,大家能够如同设定文本一样去设定字体样式标志,一般可使用二种方法去设定字体样式标志,一种是引进css文档,随后设定独特的class便可以了;此外一种是根据伪原素中的content去设定,下边跟我一起來看一下 怎样设定吧!

1:引进css文档,随后设定独特的class去应用字体样式标志

我应用iconfont官方网站来开展试验,最先应用百度搜索检索iconfont,进到官方网站以后登陆,登陆以后先去在建 一个新项目,最先开启我的新项目:

点一下在建新项目标志:

随后键入新项目名字,点一下在建:

以后便可以去上边检索框检索你要要的标志了,比如键入“天猫商城”,点一下回车键,随后把电脑鼠标放到你要要的标志上边,点一下买东西车标志加上进库:

以后在右上方开启买东西车标志,点一下加上至新项目 ,挑选你的新项目名字点一下明确便可以了,我的新项目名字是“HelloWorld”:


以后便会进到我的新项目里边,此项目更是你上边加上标志的哪个新项目,假如你要在当地应用得话,点一下免费下载至当地:

免费下载进行以后缓解压力,把缓解压力文档中最里边的全部文档(以css、eot、woff等末尾的文档)拷贝到我新项目正下方的某文档夹下,该文档夹能够随便取名:

以后在html文档里边引进里边的iconfont.css文档:

应用的方式是在我觉得要置放标志的原素的class中最先添加iconfont,以后在添加该标志的名字,名字以下:

假如要应用该名字,只必须把移动到该标志上边,在弹出来框中点一下拷贝编码便可以了:

以后便可以立即去应用了:

在其中iconfont是务必的,后边的就是我们上边拷贝编码后的名字

假如你没想免费下载到当地得话,你还可以应用线上css文档来做,最先大家寻找iconfont官方网站中所述新项目哪个页面,最先点一下“Font class”,随后点一下“暂未编码,点今生成”,以后大家便可以见到一个连接:

那么我们也不必须免费下载文档了,都不必须导进有关文档了,只必须在应用标志的html编码中引进css文档:

以后便可以立即去应用了,class仍然里边必须包括 iconfont,以后必须包括标志的名字做为class,标志名字還是根据“拷贝编码”的方法得到:

以后就是这样写便可以了:


 

2、根据伪原素中的content去设定

根据上边的流程能够把标志加上到新项目中,因为上边的那类引进方法早已描述已过,这儿在描述,假定大家如今早已把标志引进到新项目中了,大家仍然能够先免费下载到把新项目免费下载到当地,在上一个方式中早已讲过,这一都不再描述,以后把里边以eot、woff2、woff、ttf、svg末尾的文档拷贝一下,随后把这种文档取值在大家的新项目中的某一文档里边:

以后在css文档中引进这种文档,方式以下:

@font-face {
	font-family: 'iconfont';
	src: url('../fonts/iconfont.eot');
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/iconfont.woff2') format('woff2'),
	url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */
	url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */
	url('../fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */
}

之上的font-family就是我们自身界定的,必须在url中引进这种文档,url()中的单引号里边是这种文档相对性于这种css文档的url详细地址,里边的#iefix#iconfont不可以少,在其中#iefix是固定不动不会改变的,而#iconfont中的名字是font-family中的名字,她们必须加在相对文档名字的后边,format()中的內容不可以变,你可以以先把所述的內容拷贝到你自身的里边,只依据后缀名名去变更相对的url详细地址便可以了,别改动要不然会错误,因为大家会数次应用里边的标志,因此大家必须把一些特性放到公共性的class中,以下所显示:

[class^="icon-"],
[class*="icon-"] {
	font-family: 'iconfont';
	font-style: normal;
}

这意味着要是class中包括有icon-便会有font-family和font-style特性,该font-family的名字便是@font-face中的font-family中的名字,假如大家必须应用该class特性得话,那么就htm文档中的原素的class里边添加以icon-刚开始的名字,以下所显示:

以后大家便可以设定相对的标志了,通常为运用伪原素来设定,在css中能够那样设定:

对于里边的content內容,前边的\是固定不动的,后边的e799是这儿来的,大家返回iconfont官方网站,寻找大家新项目中的标志,在上边滞留以后,点一下编写标志:

拷贝“Unicode(16进制)”下边的內容:

这就进行了

假如你没想免费下载到当地得话,你还可以应用线上Unicode编号,最先大家寻找iconfont官方网站中所述新项目哪个页面,点一下“Unicode”,随后点一下“暂未编码,点今生成”,以后大家便可以见到一个连接:

拷贝连接內容,那样大家也不必须拷贝文档到新项目中了,只必须把所述连接內容置放到css文档里边:

@font-face {
  font-family: 'iconfont';  /* project id 2074612 */
  src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot');
  src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg');
}

以后就在css中写:

[class^="icon-"],
[class*="icon-"] {
	font-family: 'iconfont';
	font-style: normal;
}

以后也要写上,content中的內容究竟是啥在上边有详尽表明,没有过多阐释:

.icon-tianmao::before {
	content: '\e799';
}

随后html文档中的它都不能少,这种都会第二种方式中有详尽表述,这儿就 没有过多阐释了:

<i class="icon-tianmao"></i>

到此这篇有关要我来教你应用css中的字体样式标志的方式的文章内容就详细介绍到这了,大量有关css字体样式标志內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!