Font Squirrel:轻松将你拥有的字体ttf格式转换为webfont

字体对于网站而言,是非常重要的一个元素。今天小陈笔记给大家介绍一个可以将你所有用的字体ttf格式转换为Webfont(网络字体)的网站:Webfont Generator | Font Squirrel

打开网站之后,你可以点击“UPLOAD FONTS”来上传自己的ttf格式的字体。这里以本人自制的PanSans.ttf(真的是本人的字体,不嫌难看的话可以找我要),为例。

上传以后,并且在你点击“Yes, the fonts I’m uploading are legally eligible for web embedding.” (你必须要确认你上传的字体,是可以合法在网站上使用)之后,会出现一个“DOWNLOAD YOUR KIT”的按钮。

有三种模式可以选择,一种是“BASIC”(基本),一种是“OPTIMAL”(最优),一种是“EXPERT”(自定义)。选择自定义的话会让你选择各种参数:

一般来说选择默认的,也是被推荐的“最优”,就可以了。

我们点击“下载”键之后,会得到一个zip包。主要的文件有以下三个:

  1. pansans-webfont.woff
  2. pansans-webfont.woff2
  3. stylesheet.css(这里面给你写好了引入的默认代码)

以WordPress为例,可以按照以下步骤来启用这个字体(具体的步骤根据你把woff、woff2文件放置的位置,以及你想在什么地方使用这个字体有关系):

  1. 在主题目录底下新建一个目录fonts,在fonts底下创一个目录PanSans。
  2. 将woff,woff2文件放到PanSans目录。
  3. 在主题style.css(以二〇一五主题为例)底下添加以下代码,就可以将文章内容的字体,更换成PanSans了。
@font-face {
    font-family: 'PanSans';
    src: url('fonts/PanSans/pansans-webfont.woff2') format('woff2'),
         url('fonts/PanSans/pansans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.entry-content {
	font-family: 'PanSans';
}

注意:这里url里面的地址,就和我们从Font Squirrel里面获得的不一样,因为style.css并没有和woff2以及woff文件在同一个目录底下。这个就根据你自己把字体文件和@font-face代码放在哪有关了。

效果图(看看文章具体内容里面的英文,就是本人的字体了!(抱歉我的字体暂时还不支持中文。))

你可能还喜欢

发表评论

你的电子邮箱地址不会被公开。被标记*的是你必须填写的。