ico-font随手note

发表于   |  更新于   |   分类于   |  

icon font
字体代替图片

icon font 比图片体积小
矢量图形，拉升不变形
支持颜色更换
支持css3 对文字的修饰

阿里巴巴矢量图标库 下载响应svg图片后
，使用 fontconverter
转换成字体需要的字体格式

用加载器加载字体，需要检查加载器是否正常加载。
例如修改。url-loader 的匹配项

使用字体，实际使用的是其unicode码

使用

@font-face {
font-family: “icons-turn-arrow”;
src: url(“../fonts/icons/turn-arrow.eot”) format(“embedded-opentype”), url(“../fonts/icons/turn-arrow.woff”) format(“woff”), url(“../fonts/icons/turn-arrow.ttf”) format(“truetype”), url(“../fonts/icons/turn-arrow.svg”) format(“svg”);
}

color: #fff;
font-family: “icons-turn-arrow”;
content: “\e600”

loader报错

1
2
3
4
Module parse failed: c:\pro\react-practice-gallery\src\fonts\icons\turn-arrow.eot Expecting Unicode escape sequence \uXXXX (1:1)
You may need an appropriate loader to handle this file type.
...
./~/css-loader!./~/autoprefixer-loader?{browsers:["last 2 version"]}!./~/stylus-loader!./src/styles/App.styl

eot 和ttf 文件报错了。并没有按照url-loader，file-loader加载
查看node_modules url-loader没有安装上
于是运行，解决问题

npm install url-loader file-loader –save-dev

字体类型

EOT– Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType(.otf) 没有使用

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF–WebOpen Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

SVG(Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

ttf

字体网站

https://www.fontsquirrel.com/