CSS3 自定义字体

最新推荐文章于 2023-07-14 10:06:12 发布

weixin_39523679

最新推荐文章于 2023-07-14 10:06:12 发布

阅读量185

点赞数

分类专栏： css 文章标签： css3 字体

本文链接：https://blog.csdn.net/weixin_39523679/article/details/75194835

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装AI (Adobe Illustrator)
安装FontLab Studio 5.5
在AI中新建文件画矢量图然后复制内容
在FontLab中新建字体，点击任意字符，比如点击了大写A 和大写B，将猫粘贴在A字符上，狗粘贴在B字符上。这样，AB 字符瞬间就变身为喵星人和汪星人了。
FontLab中生成字体 emi.ttf
Goto https://www.fontsquirrel.com/tools/webfont-generator 网速很慢耐心等待。
上传emi.ttf, 下载生成的字体包, 最好在设置里多勾选集中字体
- 下载压缩包解压长这个样子

压缩包文件

打开 -demo.html 文件，就可以看到自己画得字体啦 ^_^

html

打开css文件，@font-face已经写好了，是不是很棒呢！

css文件

将字体文件（.eot, .svg, .ttf, .woff, .woff2）复制到项目文件夹
新建html文件，写入代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emi font</title>
</head>
<style>

    @font-face {
        font-family: 'emi';
        src: url('emi-webfont.eot');
        src: url('emi-webfont.eot?#iefix') format('embedded-opentype'),
        url('emi-webfont.woff2') format('woff2'),
        url('emi-webfont.woff') format('woff'),
        url('emi-webfont.ttf') format('truetype'),
        url('emi-webfont.svg#untitledregular') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    body {
        font-family: "emi";
        font-size: 100px;
    }
</style>
<body>
    AB
</body>
</html>

刷新浏览器， you will see —– SURPRISE!!!

当然你也可以通过font-size 和 color 来写很多的AB，就像操作字体一样简单, like this:

Multiple AB

weixin_39523679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 自定义字体

CSS3 自定义字体下载AI (Adobe Illustrator)安装FontLab Studio 5.5在AI中新建文件画矢量图然后复制内容在FontLab中新建字体，点击任意字符，比如点击了大写A 和大写B，将猫粘贴在A字符上，狗粘贴在B字符上。这样，AB 字符瞬间就变身为喵星人和汪星人了。FontLab中生成字体 emi.ttfGoto https://www.
复制链接

扫一扫