css中使用自定义字体和自定义字体图标

最新推荐文章于 2024-04-22 14:21:48 发布

诗水人间

最新推荐文章于 2024-04-22 14:21:48 发布

阅读量10w+

点赞数 6

分类专栏：云博前端 # css笔记前端

本文链接：https://blog.csdn.net/qq_41813208/article/details/108352758

版权

css笔记同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

云博前端

20 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

下载并安装Adobe Illustrator CC 2019简称AI
下载并安装FontLab7简称AI

软件安装包:
链接: https://pan.baidu.com/s/1C8d44Y2z4ro7hKg9amt86g 提取码: tvng

自定义字体为什么要使用自定义字体？

浏览器对于字体的支持力度不一样，概括的说：不是所有的字体浏览器都支持!

换而言之：要使用浏览器不支持的字体，就得通过其它方法解决

解决方案：

css3中使用@font-face可以支持浏览器不支持得字体

第一步、需要将字体文件 xxx.ttf或者xxx.eot上传到服务器上，让外网能够下载这个字体文件

第二步、在需要使用该字体得页面中使用@font-face引入外部字体，如下设置

其中得src就是引入字体文件，然后font-family给该字体定义一个名字例如：myFont

<style type="text/css">
  @font-face {
    font-family: myFont;
    src: url('自定义的字体文件.ttf'),
    url('自定义的字体文件.eot'); /* IE9+ */
  }

  /*使用方式如下*/
  div {
    font-family: myFont;
  }
</style>

最后、给指定元素得css设置font-family值就是上面定义的名字

对于上面的tty文件，在windows操作系统中：C:\Windows\Fonts下存放着大量的tty文件
下面是字体文件的部分截图

在这里插入图片描述

字体图标（矢量字体）

矢量字体与普通字体区别在于，矢量字体不会随着缩放而变形，变色。

自定义字体图标

原理：自定义字体图标就是通过将字体和矢量图进行绑定。

首先需要画矢量图

用Adobe Illustrator CC 2019 --下面简称AI来画矢量图

在AI中文件–>新建
默认即可
在这里插入图片描述
使用工具栏画矢量图图标

在这里插入图片描述
如下我画了一个房子

然后Ctrl + A 全选，Ctrl + C 复制，最后需要粘贴到Fotlab7中
在这里插入图片描述

然后进行字体和图标的绑定

使用FontLab7将字体和矢量图进行绑定
打开FotLab7 新建字体
在这里插入图片描述

第三步、将签名通过AI画的图标复制粘贴到双击后的窗口中

在这里插入图片描述

第四步、导出字体，格式 ttf

在这里插入图片描述

然后就会有如下的文件夹

最里面有一个ttf文件

第五步、ttf文件转换成浏览器支持的woff文件

使用下面任意一个在线网站进行转换

第六步、解压下载压缩包

复制里面的woff和woff2文件到项目中，参考解压后提供的css文件内容的代码，将里面的css代码复制粘贴到项目中即可使用了

使用案例在解压后的文件中有

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
		@font-face {
			font-family: 'Unnamed';/*这个值是 后面类中font-family需要填入的内容*/
			src: url('Unnamed-Regular.woff2') format('woff2'),
				url('Unnamed-Regular.woff') format('woff');
			font-weight: normal;
			font-style: normal;
			font-display: swap;
		}
		.your-style { /*这个类名自己定义*/
			font-family: 'Unnamed'; /*和上面font-family的值一样*/
			font-weight: normal;/*默认值不用改*/
			font-style: normal;/*默认值不用改*/
			font-size:200px;/*设置字体大小200px*/
			color:red;/*字体颜色红色*/
		}
    </style>
</head>
<body>
<div class="your-style">A</div>
</body>
</html>