font的使用

来源：互联网发布：在线选片系统源码程序编辑：程序博客网时间：2024/04/29 03:46

font字体操作：

一、psd中[导出内容]格式选ai；

二、用ai打开刚才导出的文件，然后复制下；

三、打开fontCreator，然后新建一个字形并打开，将ai复制的内容粘贴进来，并导出；

四、字体转换。打开（http://www.fontsquirrel.com/tools/webfont-generator），上传刚才导出的文件，选择basic，然后下载下来。

代码编写（sass编写的）：

// icon-font.sass文件$icon-font-path: "../fonts" !default;$icon-font-family: "Ionicons" !default;$icon-version: "1.4.1" !default;$icon-prefix: my- !default;@font-face {font-family: $icon-font-family;src:url("#{$icon-font-path}/ionicons.eot?v=#{$icon-version}");src:url("#{$icon-font-path}/ionicons.eot?v=#{$icon-version}#iefix") format("embedded-opentype"),url("#{$icon-font-path}/ionicons.ttf?v=#{$icon-version}") format("truetype"),url("#{$icon-font-path}/ionicons.woff?v=#{$icon-version}") format("woff"),url("#{$icon-font-path}/ionicons.svg?v=#{$icon-version}#Ionicons") format("svg");font-weight: normal;font-style: normal;}@font-face {font-family: "huawen";src:url("#{$icon-font-path}/hwxh.ttf?v=#{$ionicons-version}");font-weight: normal;font-style: normal;}.base-icon{  display: inline-block;  font-family: $icon-font-family;  speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  text-rendering: auto;  line-height: 1;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}//icon-variables.sass文件$icon-var-person:"\f100";//icon-icons.sass文件.#{$icon-prefix}person:before{@extend .base-icon;}.#{$icon-prefix}person:before{content:$icon-var-person;}

更多详情->

0 0