图片分类
位图
矢量图
自定义字体
font-face:允许网页开发者为其网页指定在线字体。
通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖。
@font-face{
font-family
所指定的字体名字将会被用于font或font-family属性
src
字体资源
}
注意:
不能在一个 CSS 选择器中定义 @font-face
<style type="text/css">
@font-face {
font-family:"damu";
src: url(damu/GOUDYSTO.TTF);
}
#test{
font: 50px 'damu';
}
</style>
<div id="test" >
邱海峰 qhf
</div>
字体图标
-
Adobe illustrator
AI是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件，
是一款非常好的矢量图形处理工具。
该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目。 -
FontLab
FontLab是一个专业级的字体编辑软件，广泛应用于字体， 设计人员和排版印刷业等专业场合。
它能够对已有的字体进行修改，也可以完全按照要求 重新设计需要的字体。
字体兼容处理网站
https://www.fontsquirrel.com/tools/webfont-generator
icomoon字体图标
字体图标基本思路
- 设计一套矢量图
- 将不同的矢量图绑定到不同的字符上生成自定义字体。
一般通过工具或者站点来处理 - 在页面中运用
字体图标使用流程
-
得到字体图标
AI / FontLab 制作工具
将字体图标与特殊字符绑定，比如用‘Q’绑定一张字体图标
-
打开字体图标处理网站
https://www.fontsquirrel.com/tools/webfont-generator -
上传得到的字体图标（点击upload fonts）
-
处理完后统一Agreement协议
-
点击Download your kit
-
下载完成后，解压放到项目中
-
打开stylesheet.css文件
@font-face {
font-family: '改成想要的名字';
// 改成想要的名字
src: url('latinwd-webfont.woff2') format('woff2'),
url('latinwd-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
- 页面中使用
style中设置：
@font-face {
font-family: 'dumn';
// 改成想要的名字
src: url('latinwd-webfont.woff2') format('woff2'),
url('latinwd-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
span{
font: 30px 'dumn'
}
<span>Q</span>
// 注意：只有调用绑定字体图标时所用的字母才可以显示字体图标
使用字体图标库
-
打开阿里字体图标库网站
-
点击右上角IcoMoon App按钮
-
如果有字体图标，import icons(导入字体图标)
注：只能导入svg图
-
导入svg图后，需要全部选中，然后点击右下角的Generate Font
左上角Prefences可以改名
-
然后下载download
-
解压，复制到项目中
-
项目页面引入“style.css”文件，根据“demo.html”中，在项目中引入类名即可引入字体图标
<span class="icon-home"></span>