前端改变字体（如何潇洒的花式使用字体）

逗爷 2023-01-03 04:36:21 794

前端改变字体（如何潇洒的花式使用字体）Windows操作系统以下是各系统的预装字体：普通地引入1p{font-family:STKaiti;}/*华文楷体*/此处有普通的注意：在不同的系统中，预装的字体是不一样的，所以你在mac上引用Windows上的字体，是不会正常出现的。

不管你是前端狗、设计师还是切图仔，你都绕不过搞字体这条路，虽然这条路并不是很难过，然鹅也是有一些注意事项的，请掏出小本，做好笔记：

普通地使用

人人都会的font-family

普通地引入

1	p{font-family:STKaiti;}/华文楷体/

此处有普通的注意：

在不同的系统中，预装的字体是不一样的，所以你在mac上引用Windows上的字体，是不会正常出现的。

以下是各系统的预装字体：

Windows操作系统

黑体：SimHei

宋体：SimSun

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

1234
p{font-family: Georgia "Times New Roman" "Microsoft YaHei" "微软雅黑" STXihei "华文细黑" serif;}
花式注意：
1. font-family的规则是：
- 如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
- 如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。
- 优先使用排在前面的字体。
根据以上规则，font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往会非常的吃藕（丑）。
为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。比如，”微软雅黑”的英文名称是Microsoft YaHei。

此外，中文字体的中文名称，以及由多个单词组成的英文名称，应该放在双引号内。

上面的那堆简洁粗暴的总结一下就是：

想优先用哪个搞前面，英文字体搞前面，中英文名儿都搞上，汉字加引号，有空格加引号<(￣︶￣)↗

花式小细节：

serif和San-serif分别代表衬线体和无衬线体

花式第二招：引入自己下载到本地的字体

哦嗬嗬嗬嗬~

这里就要开始使用你们好多人都搞不懂的@font-face啦~然鹅并没有什么好怕的，跟着我做就可以了~

首先先去下载一个自己喜欢的字体，参考地址：

中文字体-http://font.chinaz.com/zhongwenziti.html

英文字体-http://www.1001freefonts.com/

然后下载字体文件到本地，一般字体文件的格式有.ttf .otf .woff eot和.svg 找到它们放在你的字体文件夹就可以了

例如我们的目录结构是

├── index.html

├── css

│ └── index.css

├── font

│ └── windy.ttf

index.html

12345678

<html><head><link rel="stylesheet" href="css/index.css"></head><body><p>today is windy.</p></body></html>

index.css

12345678910

/*要先引入fontface*/@font-face{ font-family:windy;/*windy可以自定义为任何名字*/ src:url('../font/windy.ttf');}/*然后再用到你想用的地方*/p{ font-family:windy;/*用上刚才我们命名的windy*/ font-size:16px;/*然后正常设置一些其他的就好啦*/}

然后就阔以啦~

别走哟~下边还有233333

前端改变字体（如何潇洒的花式使用字体）(2)

吃瓜群众一：我想搞百度手机版的图标，可是审查元素都找不到在哪里诶……

吃瓜群众二：好多其他站的icon也是，并没有发现图片文件在哪里……

吃瓜群众三：你们啊，too young！

以下是三号吃瓜群众的独白，与本作者无关

吃瓜群众三：你们知道iconfont这个东西么？

众吃瓜群众：不知……

吃瓜群众三：不知道还不赶紧去看

（于是众人赶紧去到iconfont官网 http://www.iconfont.cn/plus）

iconfont.cn是马云爸爸家的UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。

官方字体库界面（http://iconfont.cn/collections）长这样

前端改变字体（如何潇洒的花式使用字体）(3)

另外还有很多其他公开库可以使用

如果我们想要找某一类型的字体图标，只要在搜索框输入关键词就可以啦

前端改变字体（如何潇洒的花式使用字体）(4)

然后就粗现了很多西瓜

前端改变字体（如何潇洒的花式使用字体）(5)

此时，如果只需要图像格式的话，直接下载选择格式就好了

前端改变字体（如何潇洒的花式使用字体）(6)

但是，如果我们希望它是以字体图标写进html的话，就要先加入购物车里

前端改变字体（如何潇洒的花式使用字体）(7)

然后下载到本地

会有一个文件夹包含demo.html demo.css iconfont.css和四个字体文件

打开demo.html会有已经写好的示例~

总的来说有两种方式可以使Html页面引入iconfont

第一种：

css

1234567

@font-face {font-family: 'iconfont';src: url('iconfont.eot');/*其他兼容自行添加*/}.iconfont{font-family:"iconfont";}

html

1	<i class="iconfont"></i>

第二种：

css

12345678

@font-face {font-family: 'iconfont';src: url('iconfont.eot');/*其他兼容自行添加*/}.iconfont{font-family:"iconfont";}.icon-xigua:before { content: "\e7a3"; }

html

1	<i class="icon-xigua iconfont"></i>

蓝后，你的页面就阔以出现西瓜啦，再根据需求添加样式吧~

貌似大家已经从三号吃瓜群众那里知道iconfont了，除了iconfont，常用的字体库还有iconmoon 和bootstrap的fontawesome 它们的使用方法也同样很简单

以fontawesome为例

首先下载字体库到本地

蓝后将font-awesome.min.css引入你的页面，注意路径

12345

通过应用 icon-large (增大 33%) icon-2x icon-3x 或 icon-4x 样式让图标变得更大。

1234	<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

结果如下图

前端改变字体（如何潇洒的花式使用字体）(8)

是不是感觉很神奇呢噢嗬嗬嗬嗬嗬嗬~~~

前端改变字体（如何潇洒的花式使用字体）(9)

话说这个主题真是没完没了啊，靠着写字体撑起一片天……好了，主要是因为web技术发展的迅速，我们又可以用上多色字体了，多色字体顾名思义，区别于以往普通的单色icon，拥有更加生动丰富的色彩，同时又更方便控制，很是值得尝尝鲜的~

首先打开马云爸爸家的iconfont之多色字体库 wow，果然有钱最能促进高科技了

前端改变字体（如何潇洒的花式使用字体）(10)

OK 那么其实使用起来也并不是很困难，如果你已经看过这个系列的第二篇:如何花式使用字体（二）的话，流程基本是差不多的

作为一个吃货，我们选一个食物的多色字体库

前端改变字体（如何潇洒的花式使用字体）(11)

然后让我们唱起来：I have a pen I have an apple……

把Apple加到购物车，点击页面右上角的购物车，下载代码

然后你会得到一个含有示例的文件夹

多色字体主要用了symbol引用这种全新的引用方式，所以我们找到demo_symbol.html文件，打开可以得到一个苹果的多色字体引用示例

具体使用symbol引用产生多色字体方法如下：

Step1: 引入js

在<head>里引入文件夹里的iconfont.js

123	<head><script src="https://img.aigexing.comiconfont.js"></script></head>

※注意路径

Step2: 引入通用CSS

12345678910111213

<head><meta charset="utf-8"/><title>多色字体吃瓜教程</title><script src="https://img.aigexing.comiconfont.js"></script><style type="text/css">.icon {width: 1em; height: 1em;/* 改变图标大小*/vertical-align: -0.15em;/* 垂直对齐方式*/fill: currentColor;/*图标颜色*/overflow: hidden;/*解决溢出部分*/}</style></head>

tips: