第一次了解到@font-face是小伙伴给我展示的功能 感觉奇妙的不得了 @font-face 是CSS3中的一个模块 使用它你就可以将你自定义的web字体 去实现一些奇妙的想法
首先先介绍一款字*作软件 fontforge 下载地址 http://fontforge.github.io/en-US/
下面演示下一个小的使用流程
首先打开软件 选择一个字体文件(这个文件是我windows本身的文件 也可以到字体网站上去下载其他样式的字体文件)
下面是打开之后的界面
这是字体文件的一部分 当你使用这个字体的时候 5在页面中就会变成下面的样子 我们利用这个字体重新生成一个自定义的字体
在刚才打开的字体页面 选择 file->new
就显示出一个完全空的没有对应规则的字体文件(此时的后缀名是.sfd) 下面我们来编写这个字体文件
在最开始的文件中选择一个对应项 比如1下面的值 右键复制 到new出来的文件中 我将粘贴到5下面 也就是我完成了一个 5到1的对应 在页面中我使用数字5的时候 使用这个自定义字体会展示成1 (我一共完成了 1- 5 2-4 3-3 4-2 5-1 ) 也就是在页面中12345 会展示成54321
接下来 我对0的对应项进行了设置 双击new出来的file下面的空白项 弹出窗口 在这里你就可以设置你0 对应的字体了 我打开了另一个字体文件(也是我电脑里面的字体文件)
webdings.ttf
我将其中的一个非常炫酷的摩托车 粘贴到0的下面 (当然你也可以按照这个摩托车的比例 去自己画一些图案 )
下面将new出来的文件保存为ttf格式文件 在new出来的窗口选择file->Generate fonts
在弹出的窗口中 options的选项上面 选择 TrueType(Symbol)格式 就会生成ttf格式的文件了 我保存的文件名是fun.ttf (这里面如果你选择的了别的字体样式 通过更改后缀名 是不会生成有效的字体的文件的 保存的过程中出现提示 说字体中存在错误 也选择继续save )
这样就生成了自定义的字体了 有关fontforge的介绍完毕
使用方法:
@font-face {
font-family: <YourWebFontName>; //是你自定义的字体的名字
src: <source> [<format>][,<source> [<format>]]*; //<source> 是字体文件的位置 [<format>]帮助浏览器识别字体文件的类型
[font-weight: <weight>]; //是否粗体
[font-style: <style>];// 字体样式
}
下面在我的页面中使用我自定义的字体(我是在chrome下测试的 因为浏览器对各种字体的支持度不同 为了兼容浏览器 还要通过字体转换工具把ttf文件转换成你需要的格式)
<style type="text/css">
@font-face {
font-family: "test";
src:url('fonts/fun.ttf') format('truetype');
} #test {
font-family:'test';
}
</style>
这样在我页面中id为test的里面的文字就会应用我的自定义的字体
<p id="test">012345</p>
出现了那个炫酷的摩托车 12345也对应成了54321
1)摩托车应用
可以在logo出使用自定义字体来代替图片
2)12345 -> 54321
可以设计成一些页面展示值的混淆 上面的例子中你打开chrome的控制台 发现显示的值还是012345 也就是其他人还是能读取我的值 我想到一个最简单的方式就是 比如后台数据是1 在传给前端的时候给个2 而2 在页面中就变成了4 这样后台数据与前端数据的对应显示 就变成了 1 - 4 的关系 但是别人看见的仍然是2 - 4的对应关系 你也可以在后边对数据进行更加复杂的数据处理 来实现数据混淆的效果