问题标签 [webfont-loader]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - how to get the font src url via webfont loader
i use webfont-loader dynamic load fonts via css files,code like this
and in the css file,it like this
i wonder as if there is a way to get the font face url,like "Lobster_1.3-webfont.ttf" and "Lobster_1.3-webfont.woff" which defined in css.
in webfont-loader,there is no such api,if there is no directly way,i have to load the css as text file first,but i relly don't want do such things
do you guys have any clue?
PS:the reason why i need the font's url,is because i use fabric.js to create svg file and render it to PDF by phantom.js in node side,but looks that phantom.js did not support svg with @import url('xxx.css'). so i have to use @font-face with src.
javascript - 使用 md-virtual-repeat 动态加载字体
您好，我遇到了从现有数组动态加载字体的问题。
我从谷歌字体中获取所有字体。然后我使用md-virtual-repeat来渲染字体。在我使用指令的每个元素上，该指令的链接功能使用Web Font Loaderrt-font加载所需的字体系列。问题就从这里开始了。链接函数不是从第一个元素开始加载字体。一些元素没有正确应用字体样式，其中一些元素在单击之前不会呈现 font.name
我这里有codepen。所以我假设我在部分动态字体加载和渲染中破坏了逻辑
请有人帮我解释我应该如何以及以什么顺序执行以下操作的逻辑：1）从数组部分加载字体ин 5个元素2）在重复列表中渲染它们并正确应用它们的字体样式。我错过了什么，也许我应该使用延迟加载或......
javascript - 动态加载字体
我的项目需要大约 150 种字体。最初加载所有字体会增加页面加载时间。
我尝试谷歌搜索，但找不到答案。
设想：
option用户将从<select>标签中选择一种字体。单击后，我必须动态检索字体并确保字体由浏览器呈现，然后使用该字体来避免无样式文本 (FOUT) 的 Flash
目前我正在使用AJAX请求该字体文件
问题
我不知道浏览器何时渲染字体，所以我最终显示FOUT
css - WebFontLoader：为什么 vanilla font-family 声明不足以用于后备？
我喜欢使用WebFontLoader来加载字体。这是一个快速的解决方案，对我来说效果很好。我通常通过在我的页面中放置类似这样的内容来异步使用它<head>：
然后，在我的 CSS 中，我会做这样的事情：
不过，我最近一直在阅读有关 WebFontLoader 的内容，而我看到的大多数示例（这里有一篇关于它的文章）都做了类似的事情，使用 WFL 应用于<html>元素的类来检测字体是否已加载并准备好利用：
我的问题是：为什么声明带有系统备份的普通字体堆栈还不够？font- family的重点不是如果第一个不被识别，它会自动回退到其他的吗？
如果浏览器发现堆栈中的第一个字体不是系统字体，它是否会默认隐藏该元素，尽管有备份 - 或类似的东西？
javascript - 使用 Web Font Loader 后的“脚本作为渲染阻止文件”
我正在尝试从加载 Google Web 字体引起的Google Pagespeed 洞察力中删除“脚本作为渲染阻止文件”错误。互联网告诉我使用Web Font Loader异步加载字体。我在页脚中放置了以下一段 javascript，字体加载良好，但我的 pagespeed 洞察结果中仍然出现渲染阻塞错误。
注意：字体渲染阻塞错误仅在移动测试中出现，而不是在桌面上。
编辑：
尝试在关闭 body 标签之前添加脚本仍然会导致渲染阻塞文件错误：
javascript - 如何使用 Google WebFontLoader 通过 url 加载自定义字体
我需要使用 WebFontLoader 在运行时按需加载字体（.ttf、.otf）。
每种字体只有 fontFamily 和 url。
看起来 WebFontLoader 可以选择使用 .css 文件加载字体，例如：
有没有办法在没有 .css 文件但有字体文件的直接路径的情况下做到这一点？
我不想使用任何外部网站来存储我的字体文件。
laravel - Laravel 5.4 webpack 自定义 iconfont/webfont 插件
我刚开始使用 webpack.js 和 Laravel 5.4（从 5.2 升级）
我几乎把所有东西都整理好了，但我的构建和 sass 需要一个来自 svg 的 iconfont 生成器。
在 gulp 和 grunt 中，这不是问题，但似乎无法弄清楚如何在 laravel 5.4 中向 webpack 添加自定义节点和插件
我目前正在尝试使用https://github.com/itgalaxy/webpack-webfont
其中有最少的使用说明，我完全不知道我是如何A：调用这个插件和B：我在哪里实际放置这个代码？在webpack.config.js？还是我从webpack.mix.js?
javascript - 为什么我要在 Webpack 和 React 中使用字体加载器？
我不太明白为什么在我的 React 应用程序中需要一个字体加载器，使用 Webpack，但我看到很多关于这个的教程。我能不能像往常一样在我的 CSS 中包含字体，然后让它在 React 中可用？
或者我只是错误地假设我确实需要一个字体加载器？如果我是，为什么人们使用一个？
ios - 在cordova ios应用程序上显示延迟的外来字符
我们正在使用Webfont Loader来加载谷歌字体。在 WebFont.load 的活动回调中，我们加载我们的主脚本和引导 angular.js 应用程序。
为了让浏览器在加载 google 字体文件之前使用默认字体，我们为 .wf-active 类设置字体
在 angular run 中，我们从加载器切换 apploaded 和 clear screen 并显示应用程序。
html
我们看到“正在加载...”，直到字体文件加载完毕，然后应用程序引导成功。但是按钮文本在几秒钟内呈现为“GR”，一段时间后，“İ”和“Ş”字符被加载到屏幕上，我们在按钮上看到 GİRİŞ。
我确信字体文件是在应用程序引导之前加载的，因为加载应用程序后字体不会改变。
可能无关紧要，但是我在页面上得到了一些图像文件，并且用图像文件呈现了外来字符。所以有某种奇怪的屏幕渲染延迟。
我们只在 iOS 应用程序上遇到过这个问题，我已经在 iPhone 6 和 6s 以及 xcode 模拟器上对其进行了测试。这可以在浏览器（safari、chrome 和 firefox）和我们使用相同的 cordova 项目创建的 android 应用程序上按预期工作。
css - 带有 Google 字体的 Webfont 加载器未使用 https
我在我的网站上使用 webfont 加载器来获取字体，并具有以下设置：
HTML
JS
然后在我.htaccess的内容安全策略中设置样式表的来源，如下所示：
但是当站点加载字体时，它使用字体的http://源，因此它被 CSP 阻止，我在控制台中收到以下错误消息：
如何确保站点正在加载样式表的 https:// 版本？