布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

使用jQuery和CoffeeScript的Async typekit

使用TypeKit ?使用CoffeeScript ?想要使用jQuery异步加载typekit库?

先做重要的事。在我们开始之前,确保你把一切都准备好:

  • typekit帐户(或Adobe CC)
  • 安装CoffeeScript
  • 包括jQuery

创建一个新类

我将创建一个新类来存储web站点所需的函数。在这个类中,我们将创建一个调用的函数initTypeKit ()这将初始化我们网站上的TypeKit。

美元->Brianflove@_initialized=构造函数:()->如果@_initialized“不要自己实例化这个类”@_initialized=真正的brianflove=Brianflove

我创建了一个名为Brianflove,它有一个构造函数,在实例化类时将调用该构造函数。我还检查类是否被多次实例化(对于我们的演示,它是一个单例类)。最后,我将类的新实例创建到一个名为的变量中brianflove

此外,值得注意的是,我的类处于领先地位美元函数,以便在DOM准备好时执行代码。这是使用jQuery和CoffeeScript时非常标准的做法。

创建initTypekit ()方法

下一步是创建initTypekit ()方法,该方法将包含在web站点上初始化typekit的代码。在这个方法中,我们将拥有一个配置参数对象。配置参数将被传递给Typekit.load ()函数。属性中详细介绍了这些配置参数使用它们的嵌入代码的typekit帮助页面。我将使用jQuery来淡入字体的位置。这是为了避免输出信号(无风格文本的闪光)。

initTypeKit:()->配置=kitId:“your-id-goes-here”scriptTimeout:3000活跃的:->美元(”。集装箱h1。集装箱。铅')每一个->美元(@)渐显800

配置对象包含以下键:

  • kitId:您的帐户ID
  • scriptTimeout:从typekit中加载字体之前的毫秒数
  • 活跃的:一个回调函数,当webfont被成功加载时执行。

在我的活动函数回调中,我只是使用jQuery的渐显()函数来淡入我的页面上使用字体的每个元素,我从typekit加载。您可以删除它或根据自己的需要对其进行定制。

接下来,我们需要添加wf-loading初始化html元素,并创建一个超时,以防字体加载失败。

美元(“html”)addClass“wf-loading”t=setTimeout->美元(“html”)removeClass“wf-loading”美元(“html”)addClass“wf-inactive”,配置scriptTimeout

最后,我们将使用. ajax ()方法异步加载typekit源代码。在成功加载脚本的情况下,我们将清除前面设置的超时,并在Typekit类上调用load()方法,传入前面创建的配置对象。

美元ajaxurl:' / / use.typekit.net/ '+配置kitId+. js”数据类型:“脚本”,缓存:真正的,成功:->clearTimeout t试一试Typekit加载配置

我们最不应该做的就是称它为新产品initTypekit ()在实例化类之后。下面是使用jQuery加载typekit的完整源代码,用CoffeeScript编写。享受吧!

美元->Brianflove@_initialized=构造函数:()->如果@_initialized“不要自己实例化这个类”@_initialized=真正的initTypeKit:()->配置=kitId:“your-id-goes-here”scriptTimeout:3000活跃的:->美元(”。集装箱h1。集装箱。铅')每一个->美元(@)渐显800美元(“html”)addClass“wf-loading”t=setTimeout->美元(“html”)removeClass“wf-loading”美元(“html”)addClass“wf-inactive”,配置scriptTimeout美元ajaxurl:' / / use.typekit.net/ '+配置kitId+. js”数据类型:“脚本”,缓存:真正的,成功:->clearTimeout t试一试Typekit加载配置brianflove=BrianflovebrianfloveinitTypeKit()

你也可以查看使用CoffeeScript和jQuery异步加载typekit的要点

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。