技术背景

在线字体又叫 web font 或网络字体,是 html5 及 CSS3 中的一种超炫技术,主要是把自定义的特殊字体嵌入到网页中。免安装、免下载、直接在线使用。

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

我们经常能看到国外的一些网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,如何实现的?如何让特殊字体在网页客户端显示?目前方案有两种:制作图片嵌入网页;引用在线字体。第一种方案生成图片是现在主流的中文字体解决方案,但是有很大的缺陷,维护麻烦、不利于用户搜索和 SEO !详见图片的弊端。第二种方案在线字体是一种创新的解决方案,在国外已经相当流行,包括Google fonts、Adobe typekit等知名服务商。通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受客户端影响。

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

【方拓字体】应运而生,为中文网页设计师随心所欲地应用缤纷的字体提供了宝贵的捷径。

返回顶部

使用方法

前往【在线字体】页面找到您心仪的字体,点击【使用】(需要登录),然后有静态调用和动态调用两种方案供您选择。静态调用用适合文字固定的情形,访问速度较快,但文字变化后需要重新生成,动态调用适合文字会发生变化的情形,访问速度比静态调用稍慢。详情如下:

一、静态调用:输入待生成字体的静态目标文字和验证码并点击【生成静态字体】之后,就能得到相应结果,请按照详细指导进行操作。如果您的网页目标文字增加了新的文字,必须重复此过程,才能使让新增文字应用字体效果。静态调用又有3种引用方式:

(一)同步引用:应用此引用方式后,您网页的目标文字区域先是空白,直到远程字体css文件加载成功后以新字体显示出来,或者因加载失败或超时则以默认字体显示。优点是用户感觉不到字体变换的突兀,缺点是目标文字的显示稍有延迟。

(二)异步引用:应用此引用方式后,您网页的目标文字先以浏览器的默认字体显示,然后再加载字体效果,直到加载成功就变换字体。优点是目标文字能快速显示出来,缺点是字体的变换效果显得较突兀。

(三)将字体布配置文件下载到本地:系统按需生成eot、woff、ttf、svg四种小体积字体文件,连同css配置文件供您下载到本地使用,该引用方式访问速度最快,且不受 跨域访问 限制。具体配置方法请自行查阅 CSS3 @font-face 相关规则。

二、动态调用:直接点击【动态调用】,即可得到相应结果,请按照详细指导进行操作。其间无需输入目标文字,因为它能适应任何文字(除非该字体本身不包含);使用过程中也无需考虑网页目标文字变化的情况。动态调用又有同步和异步2种引用方式,特点同上。

返回顶部

跨域访问

返回顶部

温馨提示

返回顶部

常见问题

返回顶部

免责声明

一、由于本网站提供的字体服务仅供技术展示与技术交流,各种字体未经该字体的作者授权不得用于商业目的或擅自传播,如有侵权行为,由用户自行承担法律责任。

二、未经本网站允许,不得盗链、盗用本站资源;不得复制或仿造本网站,不得在非本站所属的服务器上建立镜像。本站对自行开发的所有内容、技术手段和服务拥有全部知识产权,任何人不得侵害或破坏,也不得擅自盗用。

三、本网站将尽可能确保网站连续可靠运行,但鉴于网络服务的特殊性,本网站对可能发生的网络服务的中断或终止所可能导致的一切损失,不承担任何法律责任及经济赔偿。同时,本网站对免费提供的技术服务力求让用户满意,但不作任何质量担保。

四、本网站对所提供的字体服务拥有完全的解释权。

返回顶部

联系方式

如有批评指正、意见反馈,或打算技术交流,请通过 fontorg@163.com  与本站联系。

或通过 答疑簿 直接向我们提问

返回顶部