调用方法

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

方式一:CSS模式


  • DEMO

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

  • 特点优势:

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

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

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

  • 注意事项:

    • 需要预先提交文本内容:汉字字体文件平均每套5M大小,不可能整套嵌入,因此必须根据内容按需截取,生成小字体文件,字数越精简,字体文件越小,推送速度越快;

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

    • 测试时,直接双击打开html文件浏览是不能看到字体效果的,即url以“file”开头的,如:file:///E:/test.html。一定要通过本地建立的虚拟网站或发布到外网进行测试,如 http://localhost/test.html、http://127.0.0.1/test.html、http://www.youziku.com/demo/demo_css.htm

方式二:“卢教”模式


  • DEMO

  • 适用于需要在页面上多处使用有字库字体或者内容为数据库动态更新的页面。

  • 此模式为热心用户卢教(代言宝创始人)贡献,特此鸣谢!!有字库开放数据源愿与各位前端大湿一起开发各种方便灵活的应用接口。接口通过测试将向所有用户开放,接口以贡献者名字命名。

  • 特点优势:

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

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

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

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

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

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

方式三:后端模式


  • .Net-SDK       Java-SDK       PHP-SDK       Nodejs-SDK

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

  • 特点优势:

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

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

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

  • 注意事项:

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

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

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

请先同意托管协议
展开