【长文本】动态调用 Web 字体的测试页面

金梅歪休美工(繁体)    迷你硬笔行书(简体)
(各种字体未经该字体的作者授权不得用于商业目的或擅自传播)

在线字体又叫 web font 或网络字体,是 html5 及 CSS3 中的一种超炫技术,主要是把网页设计师自定义的特殊字体嵌入到网页中。免安装、免下载、直接在线使用。 由于设计的需要,网站中难免会用到一些比较特殊的字体(如方正字库)来装饰我们的网站,让其更加
美观,我们可以用 CSS 的 font-family 属性来设置文本字体。然而设置的字体如果是用户的电脑上没有安装的字体,那么对不起,文字将以宋体呈现,这大大的影响了用户体验。 我们经常能看到国外的一些网站使用了非常优雅的字体,而这些字体通常在用户的电脑中是没有安装的,如何实现的?如何让特殊字体在网页客户端显示?目前方案有两种:制作图片嵌入网页;引用在线字体。第一种方案生成图片是现在主流的中文字体解决方案,但是有很大的缺陷,维护麻烦、不利于用户搜索和 SEO !详见图片的弊端。第二种方案在线字体是一种创新的解决方案,在国外已经相当流行,包括Google fonts、Adobe typekit等知名服务商。通过上传字体文件到指定目录,然后在CSS中用规定格式进行引用就可以使字体效果跃上你的页面了,使网页用字不再受客户端影响。 但是因为中文字体过于庞大,小则三五兆,大则十几兆,所以在线字体只流行于英文网站,虽然中文网页设计师望眼欲穿,但也无可奈何。临渊羡鱼,不如退而结网,而现在我们通过按需截取的方式生成小字库,可以小到几十K,甚至几K,终于有效控制了字体文件的大小,使中文也加入了网络字体的阵营。 【方拓字体】应运而生,为中文网页设计师随心所欲地应用缤纷的字体提供了宝贵的捷径。

简短的几个字符

吴明在线字体又叫 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种引用方式,特点同上。

跨域访问基本概念 为了防止别人的网站轻易盗取您的在线字体资源,也为了防止恶意用户对我们实施盗链行为,我们对在线字体服务进行跨域访问限制。 从注册为会员之日起3天内,您的网站可以通过任何域名或IP地址自由使用在线字体,不受跨域访问限制,以便于您进行调试。3天之后,您就需要进行跨域访问设置,否则就无法正常使用我们的字体服务,包括网站仅发布在 localhost 或局域网环境的情形。 您可前往 跨域访问设置 页面进行相应的设置,将您需要使用我们在线字体服务的网站 Origin(源)加入列表。Origin 完整形式是:http://或https:// + 域名或IP地址 + :端口号,http://协议下的 :80端口号及https://协议下的 :443端口号可缺省。目前,每个用户最多可设置 6个不同的网站 Origin 将几个 Origin(源)、以及何种形式的 Origin(源)加入跨域访问列表,取决于您使用在线字体且对外发布网站用到的协议名、域名或IP地址及端口号。比如,如果仅打算用户通过 http://www.pincoo.com访问您的网站,那么您只需将其加入列表;如果还打算让用户通过 http://pincoo.com甚至公网IP形式 http://59.62.65.219访问,那么相应地,您还需要把这两个 Origin也加入列表。 设置完相应的网站 Origin列表后,通过这些网站都可以跨域访问您在我们网站上选择的在线字体,而别人的网站无法通过简单复制源代码的方式盗用您的现成资源。 注意事项: localhost可以作为一个特殊的域名加入 跨域访问列表,但它与 127.0.0.1 是不同的源; 子域名与主域名(如:http://www.apple.com与http://apple.com)、不同的子域名(如:http://service.apple.com与http://show.apple.com)均是不同的源; 不论您的网页是通过 http 还是 https 协议进行访问的,对本站 stylesheet 或 javascript 的引用一律使用 https 协议,代码如下: 当您网站用于对外访问的域名或IP地址、或者端口号发生变化后,记得也要在 跨域访问设置 中作相应修改。

只有已建站(包括本地虚拟网站)并通过 http(s) 协议访问的网页才能应用字体,直接用浏览器打开 html 文件是没用效果的。 目前只支持一次最多作用 300 个目标文字(高级会员为 490个),如果超过需要分批调用。 同一页面,可多次引用同一字体,也可以多次引用不同字体。 虽然本网站支持同一页面多次引用同一字体或不同字体,但出于网页界面清爽和访问速度的考虑,建议使用的 Web 字体不宜过于繁复。

为什么我按照提示进行操作,在我的网页中看不到字体效果的? 以下几种原因均有可能导致看不到字体效果: 直接用浏览器打开网页源文件,没有通过服务器发布网页; 您没有进行跨域访问设置、或跨域访问设置错误、或者您的网站域名或IP地址变化后没有修改相应的跨域访问设置;具体详见 跨域访问策略 您的网页是通过 https 协议进行访问的,而引用本站 stylesheet 或 javascript 的代码却没有使用 https 协议;具体详见 跨域访问策略 > 注意事项 “静态调用”方式下目标文字与生成代码时使用的目标文字不一致(比如后来您的目标文字发生变化而没有重新生成代码); 目标文字中超过最大限度 300 个字符的部分不会应用字体效果的(高级会员为 490个); 某些字体文件本身的限制,比如适用繁体中文的字体可能不会应用于有繁体的简体文字(详见下一条目)、有的中文字体遗漏了某些汉字、英文字体不会应用到中文、甚至有的英文字体只考虑大写字母(连阿拉伯数字都无法显示),等等; 我们的网站由于升级或故障而暂停服务; 其它原因,比如字体命名冲突、引用代码放错了位置 …… 简体、繁体的具体含义及注意事项? 字体名中的“简体”、“繁体”是代表字体效果呈现的方式,而不是指适用文字(输入汉字的字符集)的简体繁体类型。 标识为 繁體中文 的字体,是专门为输入繁体中文汉字的用户(如港台地区用户)而提供的。使用该类字体应当注意,对于有繁体的汉字,其简体字可能没有字体效果。 (此时,用户可以通过 简繁互转工具 先将目标内容转换为繁体中文再进行操作) 其它中文字体(未标识 繁體中文)适用的都是都简体中文字符集,其中名称中含有“繁体”或“繁”的字体,只是将有繁体字的简体汉字的外形渲染成繁体效果,如果用户复制、粘贴该文字,会发现其实文字本身还是简体的。 用户可以自己上传字体吗?如果我想使用心仪的字体而你们网站又没有提供怎么办? 出于两点原因,本网站暂时不考虑让用户自己上传字体:1、本网站的主要业务是提供高效的在线字体生成及下载服务,如果用户频繁上传字体,会挤占网络带宽及服务器存储空间;2、不是每种字体上传后就能直接使用,很多字体需要我们的精心调整才能满足应用要求。 如果您确实想上传并使用某种字体,可以通过 答疑簿 或 电子邮件 把获取该字体文件的链接发给我们,我们会斟酌其适用性并分析其可行性,然后决定是否添加。