首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用YepNope/Modernizr加载外部Google Fonts样式表

使用YepNope/Modernizr加载外部Google Fonts样式表时,可以使用以下方法来实现:

  1. 使用YepNope库

YepNope是一个JavaScript库,可以用来检测浏览器是否支持某些特性,并根据检测结果执行相应的操作。在这种情况下,我们可以使用YepNope来检测浏览器是否支持Web Fonts,如果支持,则加载Google Fonts样式表。

首先,需要在HTML文件中引入YepNope库:

代码语言:html<script src="https://cdnjs.cloudflare.com/ajax/libs/yepnope/1.5.4/yepnope.min.js"></script>
复制

然后,可以使用以下代码来检测浏览器是否支持Web Fonts,并根据检测结果加载Google Fonts样式表:

代码语言:javascript
复制
yepnope({
  test: document.documentElement.clientWidth,
  nope: 'https://fonts.googleapis.com/css?family=Roboto',
  callback: function (url) {
    if (url) {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = url;
      document.head.appendChild(link);
    }
  }
});
  1. 使用Modernizr库

Modernizr是一个JavaScript库,可以用来检测浏览器是否支持各种HTML5和CSS3特性。我们可以使用Modernizr来检测浏览器是否支持Web Fonts,如果支持,则加载Google Fonts样式表。

首先,需要在HTML文件中引入Modernizr库:

代码语言:html<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
复制

然后,可以使用以下代码来检测浏览器是否支持Web Fonts,并根据检测结果加载Google Fonts样式表:

代码语言:javascript
复制
Modernizr.load({
  test: Modernizr.fontface,
  nope: 'https://fonts.googleapis.com/css?family=Roboto',
  callback: function (url) {
    if (url) {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = url;
      document.head.appendChild(link);
    }
  }
});

这样,就可以使用YepNope/Modernizr库来加载外部Google Fonts样式表了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Fonts最佳实践

改变样式表的内容或交付方式会对字体的到达时间产生重大影响。同样地,删除未使用的CSS和拆分样式表可以减少页面加载的字体数量。 最佳做法 字体是典型的重要资源,因为没有它们,用户可能就无法查看页面内容。...[post20image1.png] 内联字体声明 大多数网站都可以在主文档的中内联字体声明和其他关键样式,而不是将其纳入外部样式表。...这可以让浏览器更快发现字体声明,因为浏览器不需要等待外部样式表的下载。...://fonts.gstatic.com" crossorigin> Google Fonts提供了通过标签或@import语句来加载字体的选项。...移除未使用的字形可以大大减少字体的文件大小。 用于生成字体子集的工具包括 subfont 和 glyphanger。 关于Google Fonts如何实现字体子集的信息,请看这个介绍 。

2.8K72

WordPress 首页加载速度(根本停不下来!)

一直就发现首页加载的速度非常蛋疼,直接蛋疼的都要碎了。今天仔细的研究了一下,发现出错的地方都是由于Google服务被屏蔽导致的,感谢CCAV。...其实一个出错的是Google的自定有搜索框,第二个是Google的开放字体服务;对于第一个确实没什么好的办法,只能暂时去掉了,如果要搜索指定站点的内容可以使用site修饰符例如在Google搜索框中输入...Google公共库&字体库的调用方法 fonts.useso.com 360网站卫士代理访问 由于众所周知的原因,只需替换一个域名就可以继续使用Google提供的免费字体库了。...同样,通过样式表引用这些资源,让网站访问速度瞬间提速吧骚年! 看了上面的域名就知道这是个神马服务了。  ...☆文章版权声明☆ * 网站名称:obaby@mars * 网址:https://h4ck.org.cn/ * 本文标题: 《WordPress 首页加载速度(根本停不下来!)》

40020

网页加速特技之 AMP

[1510652122300_3975_1510652192898.jpg] AMP JS 负责协调资源的加载时机和优先级,让外部资源按不同顺序加载使得页面的主要内容优先加载;AMP JS 的resources...使用Google AMP Cache,页面、JS文件、图片等都是从同一个源获取,并且使用HTTP2.0来优化性能。 这个缓存机制还带有的验证系统,以确保网页不受外部资源的限制,能随时随地正常运行。...在一个普通的页面中有一些script和样式表,浏览器需要等待这些资源加载完成后开始加载这些大的字体资源。...在AMP中所有的JS都是异步加载而且只允许使用内联样式表,所以没有HTTP请求阻塞浏览器去加载字体资源。...四、总结与思考 AMP亮点: AMP有利于网站SEO,在网站内容差不多的情况下,使用AMP的网站在 Google 搜索中可以获得更靠前的排名。 延迟加载、按需加载使得首屏展现更快。

4.6K82

腾讯云:WordPress教程网站中使用自定义字体

使用 WordPress 建站的过程中,很多时候我们希望在网页中使用某种特定的字体,而这种特定的字体并不是主流操作系统的内置字体。...在使用比较少的情况下,我们可以把想要的文字做成图片,但是如果网页中需要大范围的使用该字体,做成图片的方法就行不通了。而且如果把文字内容做成图片不易修改,也不利于网站 SEO。...谷歌字体是个不错的选择,它能够让字体在网页上显示的丰富多样,但是国内谷歌字体 Google Fonts 所在的 googleapis.com 网站被墙,根本加载不了,而且会导致 WordPress 加载速度变慢...获取要使用字体的文件格式,确保能在主流浏览器中都能正常显示该字体。...在样式表中声明该字体 我们以 CygnetRoundRegular 字体为例,在 CSS 中加入如下代码: @font-face { font-family: ‘CygnetRoundRegular’

1.3K20

Web 前端性能优化相关内容解析

Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insights 的相关说明。...1.优化样式表和脚本的排列顺序 正确地排列外部样式表外部和内嵌脚本的顺序,可增加下载时同时加载的数据量,并提高浏览器显示网页的速度。...将样式表放在顶部,将脚本放在底部 2.使用浏览器缓存 在 HTTP 标头中为静态资源设置有效期或最长存在时间(Google建议最短为一周,最好能达一年左右,⊙﹏⊙b汗),可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载...4.内嵌小型 CSS 将小型样式表内嵌到主 HTML 网页中,可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。...21.首选异步资源 错开资源的加载时间可减小网页加载时出现资源堵塞的概率。 22.避免在 CSS 中使用 @import 在外部样式表使用 CSS @import 会增加网页加载时的延迟。

2K100

【漏洞复现】CVE-2023-4357|Google Chrome 任意文件读取漏洞(影响微信Chromium内核的浏览器)

0x00 前言 Google Chrome是一款由Google公司开发的网页浏览器。该浏览器基于开源内核(如WebKit)编写,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。...由于Chromium浏览器的兴起,Webkit的使用也扩大到Android系统,它也成为越来越多浏览器和应用程序的基础。...0x01 漏洞描述 WebKit默认使用的xsl库(Libxslt),调用document()加载的文档里面包含对外部实体的引用。...攻击者可以创建并托管包含XSL样式表的SVG图像和包含外部实体引用的文档。...当受害者访问SVG图像链接时,浏览器会解析XSL样式表,调用document() 加载包含外部实体引用的文档,读取受害者机器的任意文件。

1.9K20

关于WordPress中字体加载慢的问题解决方案

最近发现Wordpress有时候加载的特别慢,于是就想办法找了下原因。...之前听网上说是因为wordpress用的是Google的字体库,而且是每次都要加载,导致访问慢的,于是当时装了个Disable Google Fonts的插件,禁用了Google字体,然后装了一个Useso...take over Google插件,将字体文件改为360托管的字体库,这样就可以访问快点了。...当时的效果的确挺好的,结果最近在使用的时候又发现网站访问慢了,用Chrome查了下资源加载的情况,发现访问useso的字体库的时间特别的长。这时候改用Google字体的时候反而更快了。。。...发现是一段css,使用了很多的外部资源,下面我们就用一个爬虫来把他直接下下来并打包好: #coding:utf-8 import urllib2,cookielib,sys,re,os,urllib import

83920

Web 安全字体和网络字体 (Web Fonts)

如果你想使用预装字体以外的字体,从CSS3开始,你可以使用网络字体Web fonts - Learn web development | MDN。...GB2312 的中文字体至少要增加 2 MB 以上加载量,而大部分中文字体都在 5 MB 以上。...使用网络字体的主要缺点是它会减慢你网站的加载时间。在旧的浏览器中,对CSS3的支持也很有限,而使用网络字体是需要CSS3的。...总结为了确保中文字符在不同计算机和浏览器上的正确显示,网页设计or开发者可以考虑:使用 Web 服务商提供的字体库:像 Google Fonts、Adobe Fonts 等服务商提供了很多中英文字体库,...引用多个字体:如果设计者希望在网页中使用多种中文字体,可以在 CSS 样式表中指定多个备选字体。

34610

使用CSS提高网站性能的30种方法

6.使用fonts 使用OS字体可以保存数百KB,并避免出现诸如无样式文本闪烁(FOUT)或不可见文本闪烁(FOIT)等问题。您的用户可能根本不会注意到。...可以使用以下工具生成字体子集字体松鼠或指定所需的字符谷歌字体例如,加载"OpenReplay"的Oswald字体字符: <link href="https://<em>fonts</em>.googleapis.com/...Host font files locally 引用<em>Google</em>字体很容易,但额外的DNS查找、生成子集和跟踪<em>使用</em>情况会带来性能成本。本地托管字体的下载和呈现速度明显更快。...该技术只对用户的第一页<em>加载</em>有益。后续页面<em>加载</em>可以<em>使用</em>缓存的<em>样式表</em>,因此内联CSS是不必要的,并且会降低性能。...不需要在第一个页面<em>加载</em>时为不<em>使用</em>的组件下载一个包含CSS的大型<em>样式表</em>。 对一个组件的样式所做的更改不会影响其他缓存文件。

3.4K20

响应式web设计 转

and (max-width:800px), projection" href="800wide-portrait-screen.css" />  可以写一个媒体查询列表,用逗号分隔,其中一个为真,就加载样式表...还可以在样式表里面使用媒体查询:  @media screen and (max-device-width:400px){         h1 { color:green}   }  还可以使用...css的@import指令在当前样式表中按条件引入其它样式表:  @import url("phone.css") screen and (max-width:360px);  可供媒体查询检测的特性...如何给不支持新特性的浏览器打补丁   Modernizr http://www.modernizr.com/  用于向缺少html5/css3特性支持的浏览器打补丁。   ...[endif]-->  使用Modernizr按需加载资源   YepNop.js http://yepnopejs.com/  必要时将导航链接转换为下拉菜单   http://css-stricks.com

3.6K10

用 PhantomJS 让邮件报表图文并茂(二)完善篇

而且邮件客户端为确保邮件内容的安全性,会对邮件 HTML 进行预处理,移除修改标签、样式表、脚本,甚至阻止外部引用文件的加载。 常见的问题有非内联样式失效、边距失效、图片宽度异常、背景图片失效等等。...再使用 Testi@ 模拟各类常见邮件客户端和设备,预览邮件效果。 Windows 下加载页面失败 在 Windows 环境下开发测试的同学可能会碰到的一个问题。...,例如 win,命令如下: mkdir /usr/share/fonts/win 将 msyh.ttf 和 msyhbd.ttf 复制到该目录下,例如这两个文件放在 /root/Desktop 下,使用命令...: cd /root/Desktop cp msyh.ttf msyhbd.ttf /usr/share/fonts/win/ 建立字体索引信息,更新字体缓存: cd /usr/share/fonts/...如果页面内有 alert 可能会阻塞页面加载,导致无法完成截图操作。

75310
领券