@font-face扒站的步骤
今天模仿百度首页手机版的时候遇到的@font-face的问题,现在整理一下。
问题:图中红色区域,在拷贝F12样式的时候,并没有出现这些小图标。
图1:百度的效果 图2:我做的效果
在审查元素的时候,发现这些地方不是图片,只是字体。代码如下:
.navs-news:before {
content: "\e672";
color: #777;
font: 24px/1 icons;
}
@font-face {
/*自定义的字体名称*/
font-family: <YourWebFontName>;
/*source是自定义的字体的存放路径 format是自定义的字体的格式,主要用来帮助浏览器识别*/
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_f0abbec7.eot);
src:url(//m.baidu.com/static/index/iconfont/iconfont_f0abbec7.eot#iefix) format('embedded-opentype'),
url(//m.baidu.com/static/index/iconfont/iconfont_f0abbec7.woff) format('woff'),
url(//m.baidu.com/static/index/iconfont/iconfont_f0abbec7.ttf) format('truetype'),
url(//m.baidu.com/static/index/iconfont/iconfont_f0abbec7.svg?#iconfont) format('svg');
font-weight:;
font-style:normal
}
@font-face {
font-family: icons;
src: url(../fonts/iconfont_f0abbec7.eot);
src: url(../fonts/iconfont_f0abbec7.eot#iefix) format('embedded-opentype'),
url(../fonts/iconfont_f0abbec7.woff) format('woff'),
url(../fonts/iconfont_f0abbec7.ttf) format('truetype'),
url(../fonts/iconfont_f0abbec7.svg?#iconfont) format('svg');
font-weight:;
font-style: normal
}
这时候,回到我们最开始看到的代码就可以解释了,如代码里的注释:
.navs-news:before {
/*字体图标的编号*/
content: "\e672";
/*字体颜色*/
color: #777;
/*字体大小,以及font-family:icons和@font-face呼应*/
font: 24px/1 icons;
}
再刷新我们的网页,即可看到这些可爱的“小图标”。
所有的字体文件最好都下载到本地,因为各个浏览器支持的字体不一致。比如.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
@font-face扒站的步骤的更多相关文章
- 用wget扒站时遇到电信劫持
今天用wget扒下来一个html template的站. 挂在自己机器上后随便点什么,都出电信广告.仔细检查,我勒个去... 扒站过程中,刚好被电信打了劫,看看它给我下载下来的bootstrap.mi ...
- C#通过WebBrowser快速扒站思路积累大量着陆页列表
现在工作方向已经越来越倾向于项目产品运营相关的东西.对线上运营也有了一定程度的了解. 配合一些技术性的操作,能极大的便利工作中的各种高难度任务,快速提升自我,积累丰富的经验和资源. 以近期制作LP为例 ...
- 4种常用扒站工具(webzip、ha_TeleportPro、Offline Explorer、wget)
许多开始做lead,EMU的新手,需要一个英文网站,找人定制费用太贵自己又不会技术的话,可以通过扒站来获得英文站,今天给大家介绍几种扒站工具: 1.HA_TeleportPro: Teleport P ...
- Javascript 防扒站,防止镜像网站
自己没日没夜敲出来的站,稍微漂亮一点,被人看上了就难逃一扒,扒站是难免的,但不能让他轻轻松松就扒了: 前些天有个朋友做的官网被某不法网站镜像,严重影响到 SEO,当时的解决方法是通过屏蔽目标 IP 来 ...
- wget 扒站
在Linux下,通过一个命令就可以把整个站相关的文件全部下载下来. wget -r -p -k -np [网址] 参数说明: -r : 递归下载 -p : 下载所有用于显示 HTML 页面的图片之类的 ...
- 【linux】扒站命令之利用wget快速扒站利用wget快速扒站
在Linux下,通过一个命令就可以把整个站相关的文件全部下载下来. wget -r -p -k -np 参数说明: -r : 递归下载 -p : 下载所有用于显示 HTML 页面的图片之类的元素 -k ...
- 扒站工具Teleport Pro教程
1.下载软件 http://www.jb51.net/softs/44134.html 2.安装 3.界面 先点开帮助点注册(类似于破解要不全站扒不全) 下面请看ppt, http://www.doc ...
- 2016/04/29 ①cms分类 ② dede仿站制作 步骤 十个步骤 循环生成菜单 带子菜单的菜单 标签 栏目 栏目内容列表 内容图片列表
cms 系统还有: phpcms 企业站 Xiaocms 织梦 企业站 wordpress (博客) Ecshop 商城 Ecmall 多用户 Discms 记账 方维 订餐 团购 CMS ...
- 神器扒网站——teleport ultra
在平时的开发或者学习的过程中,我们难免会看到一些让人心动的网站,于是自己想把它搞下来,自己手工一个文件一个文件把它保存下来也可以实现,完成了也累得够呛,有一款扒站的神器,可以把你所喜欢的目标网站整个网 ...
随机推荐
- 图论(网络流):[SDOI2010] 星际竞速
Description 10 年一度的银河系赛车大赛又要开始了.作为全银河最盛大的活动之一,夺得这个项目的冠军无疑是很多人的梦想,来自杰森座 α星的悠悠也是其中之一. 赛车大赛的赛场由 N 颗行星和M ...
- 【宽搜】Vijos P1360 八数码问题
题目链接: https://vijos.org/p/1360 题目大意: 3x3格子上放1~8数字,一个空位,每次空位可与上下左右交换,固定终止布局,求输入的起始布局需要几步到达终止布局 题目思路: ...
- cf702D Road to Post Office
D. Road to Post Office time limit per test 1 second memory limit per test 256 megabytes input standa ...
- centos 5 yum安装与配置vsFTPd FTP服务器
vsftpd作为FTP服务器,在Linux系统中是非常常用的.下面我们介绍如何在centos系统上安装vsftp. 什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序 ...
- 图解向hadoop分布式文件系统写文件的工作流程
网上看到一张关于hadoop分布式文件系统(hdfs)的工作原理的图片,其实主要是介绍了向hdfs写一个文件的流程.图中的流程已经非常清晰,直接上图 好吧,博客园告诉我少于200字的文章不允许发布到网 ...
- Java三十个面试题总结
都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门 ...
- Dijkstra算法为什么权值不能为负
Dijkstra算法当中将节点分为已求得最短路径的集合(记为S)和未确定最短路径的个集合(记为U),归入S集合的节点的最短路径及其长度不再变更,如果边上的权值允许为负值,那么有可能出现当与S内某点(记 ...
- [置顶] Ajax程序:处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)
无论在Window应用程序,还是Web应用程序以对用户友好的方式显示运行时的异常都是很有必要,尤其对于可能有很多不确定因素导致异常的Web应用程序;在传统的Web开发中,处理异常的方式——设计专门一个 ...
- geektool--一款很geek的工具
2016/12/18 今天尝试一款很geek的工具 geektool 听名字就超级geek有木有 get it geektool website 从官网直接下载app,一键傻瓜式安装. use it ...
- SetupFactory +添加frm2.0工具
网盘链接: http://pan.baidu.com/s/1c1DFRJM 带单独的添加frm2.0工具 原setupfactory文件下载地址:http://www.pc0359.cn/downin ...