使用自定义字体 @font-face 小试

最新推荐文章于 2024-06-10 11:01:09 发布

转载最新推荐文章于 2024-06-10 11:01:09 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tiantianwaigong/p/5073040.html

文章标签：

#前端 #ViewUI

本文详细介绍了如何使用fontforge软件制作自定义字体，并通过@font-face语法将其应用到网页中，实现了字体的个性化定制。演示了字体文件的创建、编辑以及将自定义字体应用于网页元素的方法，包括文本内容的重新排列和特定字符的替换，以达到页面展示值的混淆效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次了解到@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的对应关系你也可以在后边对数据进行更加复杂的数据处理来实现数据混淆的效果

参考 http://www.w3cplus.com/content/css3-font-face

转载于:https://www.cnblogs.com/tiantianwaigong/p/5073040.html