字体在网页中的应用

svg其实不算新标准吧,在dom标准定义的时候好像就有了,记得在高级编程那本书上看过的,但一直到html5,才是所有的浏览器都支持了,我们使用一张svg图的时候,最简单的用法就是像使用传统的图片一样去使用,还有就是svg跟css结合的使用,这个个人接触的少就不在此乱扯了,主要写写字体方面的。

其实字体呢就是自定义在css中content(content的使用可以去w3c看看,要配合before跟after伪类一起的,指定一个url作为内容),而这个url指向的是一个自定义的font,具体代码如下:

 1 @font-face {
 2     font-family: ‘icomoon‘;  /*注意这里的路径别弄错了*/
 3     src:url(‘icomoon.eot?418ycv‘);
 4     src:url(‘icomoon.eot?#iefix418ycv‘) format(‘embedded-opentype‘),
 5         url(‘icomoon.woff?418ycv‘) format(‘woff‘),
 6         url(‘icomoon.ttf?418ycv‘) format(‘truetype‘),
 7         url(‘icomoon.svg?418ycv#icomoon‘) format(‘svg‘);
 8     font-weight: normal;
 9     font-style: normal;
10 }
11
12 [class^="icon-"], [class*=" icon-"] {
13     font-family: ‘icomoon‘;
14     speak: none;
15     font-style: normal;
16     font-weight: normal;
17     font-variant: normal;
18     text-transform: none;
19     line-height: 1;
20
21     /* Better Font Rendering =========== */
22     -webkit-font-smoothing: antialiased;
23     -moz-osx-font-smoothing: grayscale;
24 }

这个声明了以 “icon-” 开头的class的font-family为你所指定的字体文件的字体格式,然后对每一个具体的字体是这样的:

.icon-Add:before {
    content: "\e600";
}

这样就完成了对一个svg字体的引用,你只需要在页面上的元素中声明class="icon-Add",然后就可以引用到你指定字体文件中对应的那个小svg图片,你也可以像使用普通字体一样去修改他的颜色,调整它的font-size,设置hover时候的颜色,等等,总之跟你使用普通的问题没有多少区别。

最后,附带上阿里巴巴的一个链接,可以上传一组svg图标然后转换成字体,可以定制自己需要的部分svg图标,拥有着很丰富的图标库,你可以尽情的选择你需要的,最后download的结果是一个icomoon的文件夹,包含一个demo.html,你只需要把font文件夹下的全部内容以及stlye.css引入即可,要注意style.css开始为的关于引用字体文件的路径别弄错了,这样你就可以直接使用了,刚好那个demo.html可以作为一个很好的查阅工具,就写这么多吧。

字体应用链接地址:https://icomoon.io/app/#/select/font

时间: 2024-11-10 20:54:06

字体在网页中的应用的相关文章

字体在网页中画ICON图标

用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background-position:xpos ypos;相对位置为左上角的 0 0,向右向下取负值 实例部分的html代码及js代码(通过js来改变背景图的位置) 1 <ul class="sprite"> 2 <li> 3 <s class="s-icon"

在网页中制作icon图标

用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮preferences来设置).它有“Use i”使用<i>标签来画图标:“Use Attribute Selectors”使用属性选择器:“Use a Class”使用class属性. 使用<i>标签时,会将font-family等字体值赋值给所有<i>标签.使用属性选择器时

网页中导入特殊字体@font-face属性详解

@font-face { font-family: 'icomoon';/*自定义字体名称*/ src:url('../fonts/icomoon.eot?rretjt');/*自定义字体的路径*/ src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), url('../fonts/icomoon.woff?rretjt') format('woff'),/*format为字体格式 便于浏览器识别*/ u

word中字体大小(pt)和网页中css设置font-size时用的px大小对应关系

pt与px转换关系为 1px= 0.75pt. 所以word中五号字体(10.5pt)在网页中对应的大小为font-size:14px.(10.5 / 0.75 = 14) 初号44pt 小初36pt 一号26pt 小一24pt 二号22pt 小二18pt 三号16pt 小三15pt 四号14pt 小四12pt 五号10.5pt 小五9pt 六号7.5pt 小六6.5pt 七号5.5pt 八号5pt

在网页中自带字体的方法

为了让网页更美观.更有个性,我们通常需要在网页中使用一些网上下载下来的字体,因为系统自带的字体可选择的余地早已无法满足人们对审美的要求. 怎么用?用户的电脑又没有安装你期望的那种字体.做成图片是可以,不过不方便修改啊,不能大幅度使用啊,不利于SEO啊,速度也比较慢点啊等等一大堆弊端.怎么办?别急,我们用CSS.CSS有这么一种优秀的功能,就是可以自定义字体.下面正式进入正题: CSS自定义字体,让你的字体运用随心所欲! 步骤: 1.下载所需字体.字体下载站提供的字体一般为.TTF格式. 2.字体

网页中如何使用一些特殊字体

虽然我们可以通过图片,flash.SIFR等技术来实现网页使用特殊字体,有利于SEO网页中嵌入特殊字体方法,@font-face属性. 通常网页上不能使用一些特殊字体,否则浏览者可能无法正确浏览到,虽然我们可以通过图片,flash.SIFR等技术来实现网页使用特殊字体, 但是这都有个严重的缺点:不利于SEO. 下面介绍一种非常有利于SEO的特殊字体应用方法:在CSS中通过@font-face属性来实现网页中嵌入特殊字体. 第一步. 获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该

利用CSS的@font-face属性 在网页中嵌入字体

字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷: 一.不可能大范围的使用该字体: 二.图片内容相对使用文字不易修改: 三.不利于网站SEO. 网络上有一些使用sIFR技术.或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷.下面要讲的是如何只通过CSS的@font-fac

在网页中使用特殊中文字体成为可能

转载 http://www.cnblogs.com/Kummy/p/4442142.html ??以前还不知道这种办法的时候,如果要在网页中显示特殊中文字体的话,需要导入整个全部的.ttf字体文件,而文件高达好几兆,根本是不可取的,偶然间看到以上链接的文章,新的思路新的方法,将网页中需要用特殊字体的中文文字,进行打包压缩. 1.安装font-spider npm install font-spider -g 2.在css中使用webfont @font-face{ font-family: 'p

在网页中画Icon小图标

在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置.优点:减少文本体积和服务器请求次数,从而提高效率. 知识点:background-image background-position(向下向右取的是负值). 特点:1,相对单个图标,节省文本体积和服务器请求次数