有字库web font主要有三种调用方式,请您根据您的实际情况选择相应的调用方式:

方式一:CSS模式


  • DEMO

  • 适用于内容静态固定的、不变动的、非数据库动态更新的的页面。

  • 特点优势:

    • 应用简单快捷:亲只需在页面代码中加入css文件引用标签(<link>),然后在效果显示标签设置class属性即可;

    • 适用范围广:凡支持css编辑的地方均可直接引用;

    • 效果展示快速高效:通过<link>标签在页面打开的瞬间将字体推送到客户端,点亮亲的页面;

  • 注意事项:

    • 需要预先手工提交文本内容:汉字字体文件平均每套5M大小,不可能整套嵌入,有字库根据提交的内容按需截取,将字体文件最大限度压缩。请只提交内容涉及到的文字,字数越精简,字体文件越小,推送速度越快;

    • 内容若有更新须重新手工提交:内容变动后,若没有重新提交,那么出现上次内容不包含的文字时,则该文字只能显示宋体。


方式二:JS模式


  • DEMO

  • 适用于内容为数据库动态更新的页面。

  • 此模式为热心用户卢教(代言宝创始人)贡献,特此鸣谢!!

  • 特点优势:

    • 多套应用:此模式可以方便直观将多套字体设置在同一页面上,操作简单易懂。

    • 自动提交:应用效果的文本内容有变动,Javascript将自动提交新内容并重新生成新的效果文件,无需手工提交。

    • 字体预加载:此模式可以在页面文字尚未完全加载,即可提前加载字体,从而实现无闪烁效果。

    • 应用简单快捷:亲只需在页面代码中加入Javascript代码,然后用选择器($youziku.load语句中第二个参数)指定需要在线字体效果的标签即可;

    • 应用效果:在新页面初次被打开,JS会根据选择器设置的标签去获取标签内容,并上传有字库生成对应字体,之后若内容不变在任意客户端都将实现快速推送。

  • 注意事项:
                   需要设置 白名单,白名单作用是为了防止非法网站盗用您的字体代码,从而非法消耗您的连接数资源(代码里的Key是和您的帐户相关联的)。所以只有您设置为白名单的域名,有字库才会允许使用您的Key。

  • 支持泛域名:

    例: a.b.c.com

    可添加泛域名如下:

    1) *.c.com

    2) *.b.c.com

    以上域名列表中您任意添加一个均可验证通过

    备注:假设如果您的域名是一级域名c.com,那么如果已经添加了泛域名*.c.com,可以通过验证

方式三:后端模式


  • 点击这里跳转到SDK下载页

  • 适用于电商及门户网站。

  • 特点优势:

    • 极速响应:本模式是在页面内容录入时即生成对应字体,当用户浏览网页时,页面会直接从CDN上获取生成好的字体文件,直接高效;

    • 可定制CDN:CDN地址可以由用户自定义,可以是用户网站的二级域名。并且用户也可以设置将生成的文件上传至自有CDN上;

    • 机动性:本模式所生成的字体与文字内容紧密相关联,页面内容随意变动,字体效果都能灵活跟随;

  • 注意事项:

    • 此模式为后端程序提交,提交后有字库生成字体,并返回@font-face语句,需要用户用数据库保存;

    • 此模式也可以不保存@font-face语句,用户可以自定义字体的地址(如果用户文章ID+标签名等来确认唯一性),在引用字体时,只需要根据自定义的路径拼出@font-face语句即可;

    • 此模式是在内容录入时调用接口,在内容展示时,不要再调用接口,直接把@font-face语句输出到前端即可。

请先同意托管协议