有字库是全球第一中文web font(在线字体)服务平台,官网写的有点牛X

需要注册帐号才可以使用,免费字体有限制,一页字数不可以超过500 个,超过500个字体就不会为标签添加字体样式,比较坑爹!

我在尝试使用两种方法之后,把一些心得拿来分享

  • 只能加载一种字体
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--只有一种字体,需要加载这个js-->
<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.client.min.js"></script>
            $(function(){
onlyOneFont();
}); //只返回一种字体
function onlyOneFont(){
var getUrl = 'http://service.youziku.com/webFont/getFontFace';
var entity = {
url:getUrl,
AccessKey:'69c8434454f842f28b46712f1b080c4a', //这个Key,可以根据不同的key返回不同的字体名称,但是在使用到页面上时,只显示 ‘思源简体’一种效果,不知道哪里的问题
Content:'测试5555',
Tag:'.only-font'
}; $youzikuClient.getFontFace(entity,function(data){
console.log('获取到的字体为:' + data.FontFamily); var fontFamily = data.FontFamily;
$('.only-font').css({
'font-family':fontFamily,
'font-size':'24',
'color':'#555',
'margin-top':'50px',
'margin-left':'100px'
});
})
}
  • 卢教模式(可以同时为不同的标签设置字体)
//需要加载两个js文件
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--卢教模式-->
<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
<script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.lib.min.js"></script>
            //可以同时设置多个字体
function luJiaoMode(){
$youziku.load(".test", "69c8434454f842f28b46712f1b080c4a", "winmantun23001");
$youziku.load(".text2","13e841f53229490490392b9a9c90ea6e", "hdjxyt");
$youziku.draw();
}

还需要要使用中对再摸索,欢迎交流!网上也没有更多的资料分享!

有字库API方法使用一二的更多相关文章

  1. Xcode itunes完美打包api方法

    转:http://bbs.csdn.net/topics/390948190 Xcode6 itunes完美打包api 方法! 特点轻盈小巧,方便快捷!

  2. 深入学习Tesseract-ocr识别中文并训练字库的方法

    上篇文章简单的学习了tesseract-ocr识别图片中的英文(链接地址如下:https://www.cnblogs.com/wj-1314/p/9428909.html),看起来效果还不错,所以这篇 ...

  3. 外部调用mvc的api方法时,如何解决跨域请求问题?

    首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...

  4. Xcode6 itunes完美打包api 方法

    转:http://bbs.csdn.net/topics/390948190 Xcode6 itunes完美打包api 方法! 特点轻盈小巧,方便快捷!

  5. Atitit. 衡量项目规模 ----包含的类的数量 .net java类库包含多少类 多少个api方法??

    Atitit. 衡量项目规模 ----包含的类的数量 .net java类库包含多少类 多少个api方法?? 1 framework 4.5 (10万个api)1 2 Jdk8   57M1 3 Gi ...

  6. Java中的API方法总结

    API方法总结 File file = new File(path); #创建文件对象,指向一个目录 file.exists() #判断目录或者文件是否存在 File[] files = file.l ...

  7. C#MVC通过AJAX调用API方法进行上传下载

    //这是写的一个类,具体是上传图片的上传和下载 public class FileResult    {        public int Code { get; set; }        pub ...

  8. 【ASP.NET Core】MVC模型绑定——实现同一个API方法兼容JSON和Form-data输入

    在上一篇文章中,老周给大伙伴们大致说了下 MVC 下的模型绑定,今天咱们进行一下细化,先聊聊模型绑定中涉及到的一些组件对象. ------------------------------------- ...

  9. js常用API方法

    String对象常用的API:API指应用程序编程接口,实际上就是一些提前预设好的方法. charAt() 方法可返回指定位置的字符. stringObject.charAt(index) index ...

随机推荐

  1. Struts2体系介绍

    回顾Struts2,在会用基础上重看的理解. Struts 2框架架构流程 一个请求在Struts 2框架中的处理大概分为以下几个步骤. (1) 客户端提交一个HttpServletRequest请求 ...

  2. C#系列之聊聊.Net Core的InMemoryCache

    作者:暴王 个人博客:http://www.boydwang.com/2017/12/net-core-in-memory-cache/ 这两天在看.net core的in memory cache, ...

  3. SpringBoot 启动概述

    透过现象看本质,SpringApplication 只是将一个典型的Spring应用的启动流程进行了扩展,因此,透彻理解 Spring 容器是打开 Spring Boot 大门的一把钥匙. Sprin ...

  4. ES6躬行记(3)——解构

    解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是 ...

  5. RabbitMQ 消息中间件

    RabbitMQ 是使用 Erlang 语言开发的消息中间件, 其遵循了高级消息队列协议(Advanced Message Queuing Protocol, AMQP). 与 Kafka 等消息队列 ...

  6. zabbix实现百台服务器的自动化监控--技术流ken

    前言 最近有小伙伴通过Q联系到我说:公司现在有百多台服务器,想要部署zabbix进行监控,怎么实现自动化全网监控? 本篇博客将讲解一个我工作时做的一个实际项目,现在写出来供大家以后参考使用. 实现自动 ...

  7. YARN集群的mapreduce测试(一)

    hadoop集群搭建中配置了mapreduce的别名是yarn [hadoop@master01 hadoop]$ mv mapred-site.xml.template mapred-site.xm ...

  8. Web网站配置Gzip,压缩js css文件

    启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...

  9. 将汉字转化为拼音的js插件

    /*---------------------------------------------------------------- // 文件名:chinese2pinyin.js // 文件功能描 ...

  10. ES5、ES2015、ECMAScript6(转载)

    阮一峰博客系列: http://es6.ruanyifeng.com/#README