font的使用

最新推荐文章于 2023-09-12 13:42:56 发布

原创最新推荐文章于 2023-09-12 13:42:56 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

font 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种从Photoshop (PSD) 文件创建自定义Web字体的方法，包括使用Adobe Illustrator (AI) 和FontCreator软件进行字体编辑及通过在线工具完成最终的字体格式转换。

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;
}

更多详情->