进阶应用-在线字库服务篇

中文字体的故事

由于设计的需要,网站中难免会用到一些比较特殊的字体(如方正字库)来装饰我们的网站,让其更加美观,我们可以用CSS的font-family属性来设置文本字体。然而设置的字体如果是用户的电脑上没有安装的字体,那么对不起,文字将以宋体呈现,这大大的影响了用户体验。

我们经常能看到国外的一些网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,如何实现的?如何让特殊字体在网页客户端显示?目前方案有两种:

  1. 制作图片嵌入网页。
  2. 引用在线字体。

第一种方案生成图片是现在主流的中文字体解决方案,但是有很大的缺陷,维护麻烦、不利于SEO!

第二种方案在线字体是一种创新的解决方案,在国外已经相当流行,包括Google fonts、Adobe typekit等知名服务商。

通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受客户端影响。

这么酷的东东,为什么以前都不曾了解?

因为中文字体过于庞大,小则三五兆,大则十几兆,所以在线字体只流行于英文网站,虽然中文网页设计师望眼欲穿,但也无可奈何。临渊羡鱼,不如退而结网,而现在我们通过按需截取的方式生成小字库,可以小到几十K,甚至几K,终于有效控制了字体文件的大小,使中文也加入了网络字体的阵营。

WordPress快站平台中文字体库在线服务

我们为平台用户提供免费的中文在线字体解决方案。

在线字体又叫web font或网络字体,是CSS3中的一个模块,主要是把自定义的特殊字体嵌入到网页中。

免安装、免下载、直接在线使用。

使用步骤:

第一步,添加字体

登录平台,选择字体管理,首先您需要添加自己的私有字体库字体文件。点击添加字体按钮就进入了字体添加页面,填写字体名称,字体标题以及上传字体文件。

  • 字体名称是字体的标示,一般使用3个上字母的英文来表示就可以了;
  • 字体标题是字体的描述,您可以填写字体库的名称如“思源楷体”;
  • 字体库文件必须是.ttf格式的字体文件,否则系统无法识别哟。

第二步,查看你的字体库

用户可以上传10种不同的字体到你的私有字体库,并在你的所有站点中任意使用这些字体。

在字体库管理页面,可以看到上传的字体文件列表,包括字体名称、字体标题、字体展示、字体引用示例,以及如果不再使用该字体了,可以删除字体文件。

在字体展示栏中,可以看到字体的字形样式,如果字体库文件是正确的话,这里就能预览到字体的样式了。如果样式不对的话说明此字体文件可能有问题了。

点击字体引用示例,您可以看到要使用该字体的具体方法。

第三步,查看字体使用示例

点击字体管理页面上的引用示例,将看到类似以下的说明:

1. 将下面这段JavaScript代码添加到您的站点 body 中,在<body>标签后:

<script src=”//cdn.oss.k8w.wang/fontjs/FontLoader.js”></script>

2. 站点字体配置中定义字体作用配置。

第四步,在WordPress中使用字体

建议使用Head, Footer and Post Injections插件,来管理您的站点标签。安装插件后,根据需要,您可以在整站文章、页面等范围页面标签中添加内容,将字库引用示例中的第一条js语句复制张贴到”AFTER THE <BODY> TAG“框中。

 

回到快站平台,在字体管理页面,点击“站点字体配置”按钮,来进行站点的字体详细配置。

在这里,可以选择站点服务。注意:因为在线字体依赖站点OSS服务,所以站点OSS服务开启的情况下才能使用在线字体,请确认站点OSS服务已开启;

接下来就到了字体详细配置页面了,每站点可定义五种不同的字体样式,用户在第一步字体管理中添加的字体都可以在这里选择到,我们来重点讲解下字体作用配置。

html页面中包含很多标签,例如<body>、<div>、<h1>、<p>、<li>、<a>等等,这些标签通常还包括两个要素,一个是class,即属性;一个是id,即标识。这些标签构成了整个页面的所有元素,因此,我们在配置字体作用的时候,只要将需要应用字体的页面标签,或者是标签的属性,或者是标签的标识填写到作用配置这里就可以了,而字体的作用配置为空白,就表示不使用该字体。是不是很灵活呢。

例如,我们想在网站的文章标题上使用自定义字体一,那么只需要检查页面的标题的标签,然后填写就可以了。先检查页面元素,可以看到页面标题是包含在这样的标签下的

所以,相应的字体一的作用配置应该填写,h2,或者它的父标签article,或者父标签的一个属性.post,或者父标签的标识#post-2073,都可以达到效果。请注意:属性名以’.’开头,id用’#’开头。多个标签以半角逗号“,”分隔;

简单的,如果我们想在整个页面都使用自定义字体,那么就填写body,因为页面的所有可见元素都包含在body标签下。

另外,两条重要的规则是:

  • 子标签的作用配置优先于父标签,例如我们可配置字体一的作用为body标签,再配置字体二的作用为body标签下的h1标签。
  • 相同字体不可重复选择,不同字体的作用配置不可重复。例如我们在字体一作用配置中配置了h1标签,那么在其它字体的作用配置中就不能再使用h1标签了。

配置完成后点击提交,如果提交成功则说明站点字体配置已完成。好了,刷新您的网站页面,就可以看到您的字体的效果了~!

 

 

该文章对您有帮助吗?

相关文章

说点什么

500