自定义web字体-通过@font-face在网页中嵌入自定义字体

最新推荐文章于 2024-07-25 10:31:33 发布

xuanhaiyang2008

最新推荐文章于 2024-07-25 10:31:33 发布

阅读量1.4w

点赞数 1

分类专栏： html5+css3 文章标签： css 字体 web icons

本文链接：https://blog.csdn.net/xuanhaiyang2008/article/details/53996749

版权

html5+css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在项目中用到的web字体现在有三种：Themify Icons、Glyphicons、FontAwnsome，用的时候发现还是有些体图标不存在或者不合适，然后用图片代替了。在空闲时间研究了下FontAwnsome，发现FontAwesome有.eot、.svg、.ttf、.woff、.otf字体文件，然后在css文本由@font-face引入并配合css样式在页面中显示字体图标的。之后在网上查了资料，研究了如何自定义字体的。

工具

FontCreater-字体图标编辑工具，下载地址：http://pan.baidu.com/s/1dE79FiD
字体文件格式在线转化工具：https://www.fontsquirrel.com/tools/webfont-generator

使用工具自定义字体图形，并形成字体文件

一、新建工程

打开FontCreater软件，点击文件->新建，输入字系名后点确定即可生成带有常规字符轮廓的字体文件，然后将所有的字符轮廓删除即可，也可以选择保留
这里写图片描述

二、新建字形

在新建字形之前建议把工具栏上面的工具图标的作用先大概了解下，以备使用之需。
1. 新建空白字形
选择插入->字形或点或点击工具栏的插入字形图标即可新建一个空白的字形
2. 编辑字形：可以选择手动绘制，也可以使用现有的图片生成。手动绘制，选择字形左键双击或者右键单击选择编辑即可打开编辑窗口，然后可以选用手绘、插入轮廓、添加矩形、添加椭圆形等进行绘制；图片生成，右键单击字形选择输入图像，选择本地图片点击打开，显示输入光栅图像，根据需要选择平滑过滤，调整阈值显示出想要的图像后点击生成即可，然后再打开字形进行编辑。（个人建议使用图片，这里用图片做例子）
这里写图片描述
3. 输入图像生成字形后打开字形编辑窗口，鼠标光标放在图片右上角按住左键向右上角拖动放大（个人建议），不要超出上、下界限，否则超出的部分在使用时显示不出来。

4. 接下来就是对字形图像进行调整。选中点模式，左键单击选中中间的圆点，然后右键单击选中圆点选择”添加点”，此时会新增一个方块点。删除选中的圆点，再选中刚添加的方块点，利用方向键向原来圆点所在的位置移动，四个圆点均如此操作。如果新添加的方块点与原来的方块点不在一条直线上，则会显示明显的折线（如下图第四个图所示），可按住shift键选中在一条线上的四个点（如下图第五个图所示），然后单击工具栏的左对齐/右对齐（根据情况选择），此时四个点就会分布在一条直线上了
这里写图片描述
5. 下图第一个图中红色圆圈选中的地方有点窄，选中点模式，按住shift键，左键单击同时选中2个点（下图第二个），按住向上方向键移动2-3次，选中轮廓模式，看到的即是最终效果图（下图第三个）。此时，对字形的编辑基本完成。
这里写图片描述

三、修改字形属性

接下来就是要修改字形的属性
1. 返回工程项目面板，右键单击字形选择字形属性，展示字形的属性面板
这里写图片描述
2. 修改字形的属性。首先要确定字形的字码点，在网页中嵌入字体的时候就是根据字码点引用展示的。点开字码点后的“选择Unicode字符”，弹出的窗口下拉会看到前端为$E000、末端为$F8FF的私用区（字码点为16进制，个人觉得这个范围的值是为用户自定义字体的字码点的范围，如果有误，请一定指正）。关闭窗口，在字码点输入框定义字码点$E000（按从小到大的顺序，每个字形之间留出2到3个数，留作以后修改添加之用），点击名称输入框后的图表“基于字码点自动完成字形名称”，点击应用即可生效。
这里写图片描述
3. 修改左侧轴线与右侧轴线的值，这2个值影响字形左右的位置。（在引用调试时会详细说明），左侧轴线0不变，右侧轴线改为0，点击应用，字形的属性即修改完成。

三、生成字体文件并转换格式

1、生成字体文件

选择文件->输出字体->输出TrueType/OpenType字体，选择路径并保存，默认生成的是.otf格式的字体文件。

2、转换格式

打开在线转换格式链接：https://www.fontsquirrel.com/tools/webfont-generator，点击“upload font”按钮选择刚刚生成的字体文件上传，然后选择转换格式的配置，如下图
这里写图片描述
Subsetting设置为“No Subsetting”,勾选“Shortcuts”记住配置选项，然后勾选“Agreement”，点击“DOWNLOAD YOUR KIT”下载后即可查看所需的文件，文件列表如下：

四、页面上嵌入自定义字体

1、自定义CSS文本，通过@font-face引入字体文本

上一步获取的文件中stylesheet.css的内容是引入字体文本的方式，复制来修改url路径即可。内容如下：

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

接下来就是嵌入自定义字体需要的CSS样式，首先定义一个字体的全局样式（根据FontAwnsome得来）：

.mf {
    display: inline-block;
    font: normal normal normal 14px/1 xhyfontregular;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

定义外围圆圈的CSS（用来测试嵌入字体的位置，展示也更美观）：

.list-icon div {
    line-height: 40px;
    white-space: nowrap;
}
.list-icon i {
    margin-right: 5px;
    transition: font-size 0.2s ease 0s;
}
.ui-icon {
    background: transparent none repeat scroll 0 0 !important;
    display: inline-block;
    height: 1em;
    text-align: center;
}
.ui-icon::after {
    background-clip: padding-box;
    border-color: inherit;
    border-radius: 2em;
    border-style: solid;
    border-width: 1px;
    content: "";
    display: block;
    height: 2em;
    position: relative;
    top: -1.5em;
    width: 2em;
    z-index: 0;
}

定义字体样式，这里就用到上面所提到的字形的字码点了，上面定义的字形的字码点为$E000，CSS中使用时用E000：

.mf-folderadd {
    content: "\E000";
}

到这里CSS的定义基本完成了，接下来就是在HTML5中使用。

2、在html5中嵌入字体

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>测试</title>
    <link rel="stylesheet" href="css/bootstrap.css"></link>
    <link rel="stylesheet" href="css/myWebFont.css"></link>
</head>
<body>
<div class="col-sm-12">
    <div class="row list-icon">
        <div class="col-md-3">
            <i class="ui-icon mf mf-folderadd"></i>mf-folderadd
        </div>
    </div>
</div>
</body>
<html>

初次显示的效果不是很理想，这就需要慢慢调试了：
这里写图片描述

3、调试

首先要说明的一点，调试不需要使用所用的字体文件，我这里使用的是.woff文件，360浏览器即可支持，.woff文件使用FontCreater输出即可。这里我每次修改完就默认已经输出到.woff文件了，不再重复缀赘述。调试的时候将@font-face改为：

@font-face {
    font-family: 'mywebfontregular';
    src: url('../../../fonts/MyWebFont.woff');
    font-weight: normal;
    font-style: normal;
}

接下来开始调试。
首先，这里字形明显偏小而且位置不居中，先把字形调大，双击字形打开编辑窗口，按Ctrl+A全选字形，鼠标放到右上角向右上角拖拽，切记不要超出尚界线，然后返回工程窗口右键单击字形查看字形属性，将右侧轴线改为>=0的值（视情况而定）。调整到大小差不多的时候再调位置，左右调整在右键单击字形查看属性面板中调整左右两侧轴线的值，上下调整是在双击字形打开的窗口中全选字形然后按住方向键上下调整即可，直到调整的差不多，用软件输出.otf格式的字体文件，然后用在线转换工具转换即可。最后把@font-face改回原来的，再把fonts文件夹下的所有字体文件覆盖掉就完成了整个调试。此时就大功告成，界面显示如下：
这里写图片描述
这样Themify Icons、Glyphicons、FontAwnsome三种字体配合自定义的字体就能够在web字体中恣意纵横了。
我自己做了个小例子，下载地址：http://download.csdn.net/detail/xuanhaiyang2008/9728726