标签: webfont-loader

Web Font Loader是否不缓存字体？

只是想测试Web字体加载器的能力,令人惊讶的是我发现当我需要在另一个页面加载相同的字体时,加载器执行新的下载而不是使用字体的缓存版本.这是正常的吗？如果是这样,有没有一种简单的方法来检查字体是否可用于浏览器,换句话说是否缓存？

这是我加载字体的方式:

 <script>
    WebFont.load({
        custom: {
            families: ['Univers45custom', 'Univers45customIE']
        }
    });
</script>

Run Code Online (Sandbox Code Playgroud)

我在用Web Font Loader v1.5.10.

BramVanroy的附录:当使用谷歌的网页字体时,也存在"缺乏缓存".FOUT(无格式文本的Flash)在使用字体加载器的网站上短暂出现,即使多次重新加载页面也是如此.

由eldi编辑:嗨BramVanroy - >现在我不确定我是如何解决这个问题的,但可能我只是使用了@font-face.我测试Web Font Loader的原因是首先是FOUT.Loader将css类添加到html元素,它为您提供了一种在没有正确字体的情况下为您的页面设置样式的方法,当加载字体时,类已经消失并且您的"标准"样式存在.这是按预期工作,但"缺乏缓存"例外,在我的情况下是不可接受的.我相信使用修改HTTP标头的staypuftman解决方法可以完成这项工作,我没有时间对其进行测试,特别是我需要做一些研究来找到在asp.net托管服务提供商中设置它的方法,因为从应用程序设置它将增加额外的处理时间.

html css webfont-loader

eld*_*ldi

2015 10-23

16
推荐指数

1
解决办法

3873
查看次数

phantomjs +网络字体+字体加载器

我在一个环境中运行phantomjsnode.js,它进展顺利.目前我只是使用本地字体,但希望谷歌网页字体与phantomjs一起使用.

关于是否以及如何使用Web字体,有各种相互矛盾和令人困惑的报告phantomjs.还有像文章这样包含有死链接过时的信息.像这样的帖子表明phantomjs 2.0将支持或者可以支持网络字体,其他人则认为它不会支持2.0.1.在这篇文章中,有一个建议是webfonts在2.0中工作.

我已经尝试了很多选项,包括使用phantomjs 2.0和2.0.1二进制文件,但无法使其正常工作.可能是我正在使用Web字体加载器在我的js中加载Web字体,使用以下内容:

WebFont.load({
    google: {
        families: ['Droid Sans', 'Droid Serif']
    },
    loading: function() { console.log('loading'); },
    active: function() {
        console.log('active');
        // hooray!  can do stuff...
    },
    inactive: function() { console.log('inactive'); },
    fontloading: function(familyName, fvd) { console.log('fontloading', familyName, fvd); },
    fontactive: function(familyName, fvd) { console.log('fontactive', familyName, fvd); },
    fontinactive: function(familyName, fvd) { console.log('fontinactive', …

Run Code Online (Sandbox Code Playgroud)

webfonts node.js google-webfonts phantomjs webfont-loader

drm*_*wer

2017 05-23

12
推荐指数

1
解决办法

1629
查看次数

Google Webfonts:加载后如何卸载字体？

目前,我可以使用Google的Web字体加载器轻松加载网络字体:

WebFont.load({
    google: {
        families: ['Bree Serif']
    }
});

Run Code Online (Sandbox Code Playgroud)

但是,以后可以从DOM中卸载字体并添加元素,以便它们不再在页面上使用吗？
项目的Github上的文档没有显示提供该功能的任何选项或方法.

javascript webfonts google-webfonts webfont-loader

Nit*_*Nit

lucky-day

8
推荐指数

1
解决办法

674
查看次数

让webfontloader与node.js和jsdom一起使用

我有webfontloader在浏览器上下文中很好地工作.现在我试图看看我是否可以在node.js + jsdom上下文中使用它,特别是因为webfontloader可用作npm模块.

我有node + jsdom工作以提供合理的输出,所以我知道这部分正在工作.但是,当我尝试集成webfontloader,以启用Web字体时,我就会失败.

基本上我使用自述文件中记录的webfontloader模块,它是:

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['Droid Sans', 'Droid Serif']
  }
});

Run Code Online (Sandbox Code Playgroud)

但尽可能尝试,我得到以下错误:

ReferenceError:未定义窗口

我可以window从jsdom 获得一个对象:

            // Get the document and window
            var doc = jsdom.jsdom('<!doctype html><html><body><div id="container"></div></body></html>'),
                win = doc.defaultView;

Run Code Online (Sandbox Code Playgroud)

但是如何传入winwebfontloader以便window在该上下文中使用？

也许我表现出我的天真,并且问不可能.

javascript node.js webfont-loader

drm*_*wer

lucky-day

7
推荐指数

1
解决办法

921
查看次数

加载的砌体/同位素/填充图像+ Web字体

我在网站上使用Packery.js [ http://packery.metafizzy.co/ ]并且在页面加载时遇到一些布局问题.我查看了Mason,Isotope和Packery的文档(所有非常相似的插件,全部由David DeSandro开发),并讨论了在加载所有图像以及任何webfonts之后应该触发布局的问题.

http://packery.metafizzy.co/appendix.html

我的Packery工作得很好,只能使用imagesLoaded ......但我不确定如何将Google Web Font加载器与之配合使用.下面是我加载字体的代码,后面是imagesLoaded Packery Layout.如果任何人都可以建议在Web字体和图像加载之后让Packery解雇,我将永远感激不尽.

// before <body>
<script type="text/javascript">
WebFontConfig = {
    google: {
        families: [ 'Bitter:400,700,400italic:latin' ]
    },
    typekit: {
        id: // hidden for obvious reasons
    }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
</script>

// after </body>
// jquery and plugins are loaded prior to the …

Run Code Online (Sandbox Code Playgroud)

typekit jquery-masonry jquery-isotope webfont-loader packery

bee*_*imi

lucky-day

6
推荐指数

1
解决办法

2046
查看次数

Web字体加载器 - FontAwesome始终在IE中报告不活动

我的网站有一些客户适用于阻止IE中字体下载的组织,因此我需要为FontAwesome创建后备选项.我试图使用Web字体加载器来检测FontAwesome是否正确加载,但Web字体加载器总是报告FontAwesome无法加载,即使我可以看到FontAwesome图标已加载.我测试了IE 9/10/11.

您可以在https://vnext.radresponder.net上查看此操作.您将看到在Firefox和Chrome中,FontAwesome已正确加载并标记为活动状态; 但是,在IE中加载字体,但随后Web字体加载器触发加载回调失败并将非活动类附加到HTML标记.我有一些特殊的CSS来加载一些后备字符来替换随后加载的FontAwesome图标.

从Web字体加载器GitHub页面,我没有看到与IE列出的任何不兼容性,所以我认为这应该工作.

这是我的WebFont.load语句.

WebFont.load({
  custom: {
    families: ['FontAwesome'],
    urls: ['/local/address/for/fontawesome.css'],
    testStrings: {
      'FontAwesome': '\uf00c\uf000'
    }
  },
  loading: function () {
    console.log("loading");
  },
  fontloading: function (fontFamily, fontDescription) {
    console.log('fontloading: ' + fontFamily);
  },
  fontactive: function (fontFamily, fontDescription) {
    console.log('fontActive: ' + fontFamily);
  },
  fontinactive: function (fontFamily, fontDescription) {
    console.log('fontInActive: ' + fontFamily);
  },
  active: function () {
    console.log("active: loaded all web fonts");
  },
  inactive: function () {
    console.log("inactive: did not load all web fonts");
  }
}); …

Run Code Online (Sandbox Code Playgroud)

css webfonts font-awesome webfont-loader

Zac*_*een

2015 05-27

5
推荐指数

0
解决办法

644
查看次数

动态加载字体

我的项目需要大约150种字体.最初加载所有字体会增加页面加载时间.

我试过谷歌搜索但找不到答案.

场景:

用户option将从<select>标签中选择一种字体.点击后,我必须动态检索字体,并确保浏览器呈现字体,然后使用字体避免无格式文本Flash(FOUT)

目前我正在使用AJAX请求该字体文件

      $.ajax({
      type: 'GET',
        url: "font-file-url",
        async:false,
        success: function(data) {
            $("style").prepend("@font-face {\n" +
            "\tfont-family: \""+fontValue+"\";\n" + 
            "\tsrc: local('?'), url("font-file-url") format('opentype');\n" + 
            "}");
         }
      });

Run Code Online (Sandbox Code Playgroud)

问题

我不知道浏览器何时正好呈现字体,所以我最终显示FOUT

html javascript css fonts webfont-loader

Abh*_*nav

2018 03-03

5
推荐指数

2
解决办法

6773
查看次数

使用Web Font Loader后"脚本作为渲染阻止文件"

我正在尝试从加载Google网络字体导致的Google Pagespeed洞察中删除"脚本作为渲染阻止文件"错误.互联网告诉我使用Web Font Loader加载字体异步.我在页脚中放置了下面的一段javascript,字体加载得很好,但我的pagespeed洞察结果中仍然出现了渲染阻塞错误.

注意:字体渲染阻止错误仅在移动测试中显示,而不是在桌面上显示.

<script>
      WebFontConfig = {
         google: {
            families: ['Archivo Narrow:300,400,700']
         }
      };

      (function(d) {
         var wf = d.createElement('script'), s = d.scripts[0];
         wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
         wf.async = true;
         s.parentNode.insertBefore(wf, s);
      })(document);
</script>

Run Code Online (Sandbox Code Playgroud)

编辑:

尝试在关闭body标记之前添加脚本仍会导致渲染阻止文件错误:

<script>
   WebFontConfig = {
      google: {
         families: ['Archivo Narrow:300,400,700']
      }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      document.body.appendChild(wf);
   })(document);
</script>

Run Code Online (Sandbox Code Playgroud)