如何偷网页font-face,以及使用

  • A+
所属分类:CSS3

font-face

如何偷网页font-face,以及使用

看右侧当中的新闻、小说、视频、生活、地图、更多,还有左上角的倒三角,以及....自己找

再看下面的这张图

如何偷网页font-face,以及使用

对比右侧看下是否很多图标来源在这个字体文件当中,真的,这是一个字体文件。

这个就是今天需要说的内容,font-face是在CSS3当中新增的一个模块,主要把定义的文字,或者图片转化中字体,然后调用,最大的优点就是不会失身!!!不会失贞!!!

怎么偷

这个可能是一个重要的部分,很多网站现在已经使用font-face做的小ICO图标,这样在一定程度提升网站的性能,比如百度,今天主要的下手的也是百度。

使用工具:电脑

使用浏览器:谷歌

使用鼠标:罗技

使用键盘》》》》去你大爷

1、打开百度,右键查看函数

2、点击小手机图标,点击浏览器刷新功能,进入百度手机版本

3、查看函数导航条,Elements(不是这个)、Console(也不是这个)、Sources(也不是这个)、Network(别动手,就是这个),浏览器点击刷新。查看工作项,如下图

如何偷网页font-face,以及使用

4、酱紫就可以看到了百度使用到字体了,当然还可以查CSS里面去找相关的内容,进入CSS文件搜索"font-face",根据相关链接下载即可。

5、到了这里,还没有完,为了适配更多的浏览器,所以后缀不局限为woff,还有ttf,otf,svg,eot 那么其他的咋整呢?

https://m.baidu.com/static/index/iconfont/iconfont_353652f0.woff

https://m.baidu.com/static/index/iconfont/iconfont_353652f0.woff

https://m.baidu.com/static/index/iconfont/iconfont_353652f0.woff

https://m.baidu.com/static/index/iconfont/iconfont_353652f0.woff

https://m.baidu.com/static/index/iconfont/iconfont_353652f0.woff

怎么用

font-face {
font-family: <YourWebFontName>; ---字体名称
src: <source> [<format>][,<source> [<format>]]*; ---字体路径,字体格式
[font-weight: <weight>];----是否粗体
[font-style: <style>];----字体样式
}

百度移动端写法如下:

@font-face{font-family:'icons';
src:url(//m.baidu.com/static/index/iconfont/iconfont_353652f0.eot);
src:url(//m.baidu.com/static/index/iconfont/iconfont_353652f0.eot#iefix) format('embedded-opentype'),
url(//m.baidu.com/static/index/iconfont/iconfont_353652f0.woff) format('woff'),
url(//m.baidu.com/static/index/iconfont/iconfont_353652f0.ttf) format('truetype'),
url(//m.baidu.com/static/index/iconfont/iconfont_353652f0.svg?#iconfont) format('svg');
font-weight: normal;
font-style: normal;
}

到了这里,还没结束,还需要两个值,一个是我要知道图标的标记是啥,第二个我要放在什么位置?

不理解,举个栗子给你,我在中国,你要找我,我要告诉你我这边有什么标记,然后你告诉我你在哪里,然后我告诉你,你如何才可以找到我。

你再不懂,这一块钱我就退给你了!!!!

如何偷网页font-face,以及使用如何偷网页font-face,以及使用

这样我就获得了每个图标的标记,而不用重新去制作,需要什么,查看下before伪类的解释,并记录到CSS样式当中。

请严重注意:font:24px/1 icons  ,icons 与font-family:必须相同,负责无法获取!!!
如何偷网页font-face,以及使用

快点给劳资出来,这里需要你!!!

至此调用成功。

如何偷网页font-face,以及使用

本文为李治龙付费一元内容,其拥有本文的所有权。

李金龙

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: