怎么自定义字体_自定义字体@fontface的常见应用

前言

@font-face允许网页自带字体,从而消除对用户电脑字体的依赖。基本用法如下:

@font-face {    font-family: "family-name"; /* 字体名 */    src: url("family-name.eot"); /* IE9 */    src: url("family-name.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */         url("family-name.woff") format("woff"), /* chrome、firefox */         url("family-name.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */         url("family-name.svg#family-name") format("svg"); /* iOS 4.1- */        unicode-range: ; /* 哪些字符需要使用这个字体 */    font-weight: normal;  /* 字体粗细 */    font-style: normal;  /* 字体样式 */}

当页面中用到这个字体,且用户设备中没有这个字体,就会从@font-face中指定的路径下载字体文件。以下几点请注意:

1.因各浏览器对字体的兼容不同,需要同时备有多种字体样式,请参考浏览器兼容情况;

2.字体文件的路径需要和网页在同一域名下,否则需要做跨域处理;

3.unicode-range设置只使用该字体的个别字符,有一定实用性,请参考文档使用;

本文列举@font-face的常见应用。

自定义字体

@font-face最原始的应用场景,就是使用用户电脑里没有的字体。举例:

e513096e89cd13644e63179dd62a8b7a.png

某狗电商网站,使用@font-face引入方正字体。CSS中的@font-face依次配置了eto、woff、truetype、svg四种格式,格式参考上文。Chrome选择下载woff格式,其余格式不下载。文件地址来自misc.360buyimg.com域名,与页面自身域名不一致,使用Cors跨域。至此,字体已下载到用户的设备中了,可以直接在css中使用通过font-family调用。

成套的中文字体包含大量字符,文件通常都比较大,动辄几M的字体文件会拖累页面加载速度,影响用户体验。上述这个页面中,使用到方正字体的只有28个汉字,因此对字体进行了子集化的处理,精简后文件大小只有6.47K。关于字体子集化,请参考我的上一篇博客。

自定义图标

@font-face的另一个常见应用,是取代图片格式的图标,举例:

b236f54f7fbab4c5fdab76e43f8a4a68.png

某鸟社交网站的LOGO是一只蓝色小鸟,查看这个小鸟源码,发现这个元素使用一个空的标签。该标签中有一个::before伪元素,内容是"/f179",字体名是"edgeicons"。我们找到页面资源,下载这个字体,用字体编辑软件打开,找到unicode编码为f179的字形:

d49f0935bb07a789a75c1620512f6af9.png

可以看到,这个字形就是该网站的LOGO,因此页面中的这个字就会显示成LOGO的形状。使用字体绘制图标不仅比图片要更小,减少请求次数,还可以通过font-size矢量缩放大小,通过color设置图标颜色,使用起来也是非常便捷。

在线制作的字形图标的工具,国外用户推荐fontello,国内用户推荐iconfont。

反爬虫抓取

第一次听到字体竟然可以用于反爬虫,谁都会大吃一惊。先看例子:

f1ecd7ad9733a65d7ce103e7e24cd6d7.png

某骆驼订票网站,页面上价格明明就是1590,查看源码怎么就变成1580了?继续查css,发现此处使用@font-face引入一个自定义字体如下:

592499d5e44cc62a311a6eb6ffd301ff.png

原来,狡猾的工程师把自定义字体中的字符“8”,形状绘制成“9”的形状。这样页面中用到这个字体的所有8,都会显示为9。注意这里字体每次都会动态生成,并配合生成页面内容,使得用户页面上看到的形状都是“1590”,从而理解到正确的价格。而蠢萌的爬虫抓取到的内容,则是错误的1580。

在许多竞争激烈的行业,价格这种敏感数据,不能轻易被友商的爬虫抓取。不过所谓道高一尺、魔高一丈,某猫电影票也使用这种反爬虫策略,但网上已经出现了对页面截图、并进行图象识别的python脚本。

其他脑洞

受限于公众号不能直接修改网页源码, 有些效果展示不了。有兴趣的朋友可以点击原文链接,跳转到我博客上的原文,了解一下自定义字体的其他应用。

6adbf936e269031902d1a3b681991eda.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目中使用mock(一)

一,安装 npm install mockjs --save-dev npm install json5 --save-dev npm install axios --save 二,每个文件内容 目录: 流程: Home.vue执行getUserInforList() 调用main.js中全局变量$api 调用/utils/api下的getUserInfo…

快速搭建redis单机版和redis集群版

单机版 第一步:需要安装redis所需的C语言环境,若虚拟机联网,则执行 yum install gcc-c 第二步:redis的源码包上传到linux系统 第三步:解压缩redis tar zxf redis的压缩文件 第四步:编译 ,进入…

使用RxJava和Completable并行执行阻止任务

借助RxJava 1.1.1中引入的Completable抽象,如何并行执行阻止“仅副作用”(也称为void)任务的并行执行变得更加容易。 “ 正如您可能已经注意到,阅读我的博客时,我主要专注于软件Craft.io和自动代码测试。 但是&#x…

svn 回退到指定版本无法提交_SVN终端演练-版本回退

1. 版本回退概念以及原因?概念: 是指将代码(本地代码或者服务器代码), 回退到之前记录的某一特定版本原因: 如果代码做错了, 想返回之前某个状态重做;2. 修改了,但未提交的情况下, 回退代码方案1: (大力推荐)svn revert (作用:返回到上次提交后版本对应的最原始的状态)方案2: …

vue-awesome-swiper缩略图无法联动的问题

一,安装 npm install vue-awesome-swiper --save // npm install vue-awesome-swiper3.x --save我安装的版本是 “swiper”: “^6.6.1”, “vue-awesome-swiper”: “^3.1.3”, 在使用vue-awesome-swiper组件的时候,缩略图无法和大图实现联动&#xff…

个人博客13

今天的任务依旧为美化界面。 昨天的任务为美化界面。 遇到的问题为页面的布局,以及颜色的搭配。转载于:https://www.cnblogs.com/qilin20/p/8232942.html

tcp wireshark 过滤syn_使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手

TCP 三次握手 示意图Wireshark 抓包注意事项为了演示一个TCP三次握手建立连接的过程,我们通过 Chrome 访问一个网页。已知 HTTP 协议就是建立在TCP链接上的通过 Cmd 的 ping 命令获取 这个网站对应的 IP地址 183.136.236.13确定 这个IP 有一个非常重要的好处&#x…

Python 基础函数

1.输入输出函数 input() 打印输出的内容后,接收输入用户输入的内容,默认为“字符串”类型 print() 打印输出的内容 2.类型转换函数 int() 转为整数 str() 转为字符串 3.类型判断函数 string.isdigit() 判断string是否为数字格式,返回布尔值 4…

Vue+Element导入导出Excel

一&#xff0c;安装 npm install -S file-saver xlsx npm install -D script-loader 二&#xff0c;导入Excel 1&#xff0c;Element 上传控件 <el-uploadaction"/":on-change"onChange":auto-upload"false":show-file-list"false&quo…

javafx 使用_使用JavaFX AnimationTimer

javafx 使用回想一下&#xff0c;给AnimationTimer起个名字可能不是一个好主意&#xff0c;因为它不仅可以用于动画&#xff0c;还可以用于测量fps速率&#xff0c;碰撞检测&#xff0c;模拟步骤&#xff0c;游戏主循环等。实际上&#xff0c;我大部分时间都在看AnimationTimer…

python 定时任务系统_Python定时任务,实现自动化的方法

python教程栏目介绍实现自动化的方法。1. 安装cron基本上所有的Linux发行版在默认情况下都预安装了cron工具。即使未预装cron&#xff0c;也很简单&#xff0c;执行几条简单的命令就可手动安装# 检查是否已经预装了cronservice cron status复制代码安装并启动服务安装&#xff…

sudo su 和 sudo -s区别

sudo su 和 sudo -s区别 sudo su 和 sudo -s都是切换到root用户&#xff0c;不同的是&#xff1a; sudo su 环境用的是目标用户(root)的环境 sudo -s 环境用的是当前用户本身的环境 posted on 2018-01-08 22:25 老于601 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnbl…

js UTF-8编码转为字符串

// UTF8编码转成汉字字符串 export function revertUTF8(szInput) {var x,wch,wch1,wch2,uch"",szRet"";for (x0; x<szInput.length; x) {if (szInput.charAt(x)"%") {wch parseInt(szInput.charAt(x) szInput.charAt(x),16);if (!wch) {bre…

.Net Core 简洁架构事件(这个不完整,待仔细补充)

.Net Core的架构 - 根据微软官方文档 微软给出了.Net Core的架构方法&#xff0c;无论是在web&#xff0c;azure&#xff0c;uwp等等 微软的github地址&#xff1a;https://github.com/dotnet-architecture/eShopOnWeb 转载于:https://www.cnblogs.com/bijinshan/p/8250512.htm…

原理图中如何连线_Altium Designer10绘制原理图

在进行原理图绘制之前,应先将原理图库与PCB库相关联,在原理图绘制完成后,在生成PCB图,如何将原理图库与PCB库相关联?先进入原理图库,如下图所示。双击元器件文件,进行元器件配置。 元器件配置界面如下图所示。选择Add...进行添加对应的PCB库。 选择浏览进行查找相关PCB库…

vue 父组件与子组件之间的传值(普通传值)

一&#xff0c;子组件向父组件传值&#xff08;$emit&#xff09;&#xff1a; 1、定义子组件 <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个子组件传值的方法 --><input type"button" value"点击触发&q…

NetBeans Java EE技巧3:数据库中的RESTful Web服务

许多现代的Web应用程序正朝着使用HTTP使用无状态通信的方向发展。 REST&#xff08;代表性状态转移&#xff09;体系结构样式通常用于设计网络应用程序&#xff0c;而使用Java EE 7&#xff0c;很容易开发用于数据库通信的RESTful后端。 使用简单的POJO&#xff08;普通的Java旧…

python的序列包括字符串列表和什么_Python基础:03序列:字符串、列表和元组

一&#xff1a;序列1&#xff1a;连接操作符()这个操作符允许把一个序列和另一个相同类型的序列做连接&#xff0c;生成新的序列。语法如下&#xff1a;sequence1 sequence2该表达式的结果是一个包含sequence1和sequence2 的内容的新序列。注意&#xff0c;这个操作不是合并操…

vue 父组件与子组件之间的传值(主动传值)

一&#xff0c;父组件主动传值 1&#xff0c;父组件 <Settlement-Table1 ref"comp1"></Settlement-Table1>click(){this.$refs.comp1.getData(this.list1) } // this.list1 是需要穿的值2&#xff0c;子组件 getData(data){console.log("父组件…

参数php_PHP多参数方法的重构

php中文网最新课程每日17点准时技术干货分享假设我们要完成一个保存文章的功能&#xff0c;如果采用函数编程的方式&#xff0c;大概会是下面这个样子&#xff1a;<?php function saveArticle($title, $content, $categoryId){ // ...}?>每个参数代表一个属性&#…