问题标签 [webfonts]

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.

0 投票
0 回答
536 浏览

javascript - 将@font face的javascript绝对url更改为相对url

现在,使用这段 javascript,woff 字体的 url 表示绝对 url。如何将其从指向绝对 url 更改为相对 url

0 投票
5 回答
10769 浏览

javascript - 如何使用 JavaScript 导入字体文件?

CSS 有一个@font-face规则允许我们“使用”自定义字体。

JavaScript 有这个功能吗?

更具体地说,是否可以在不使用 CSS@font-face规则的情况下“使用”自定义字体?

0 投票
5 回答
59746 浏览

javascript - 加载网络字体后如何收到通知

Google 的 Web Fonts API 提供了一种方法来定义要在字体完成加载或无法加载等情况下执行的回调函数。有没有办法使用 CSS3 网络字体(@font-face)实现类似的功能?

0 投票
3 回答
11946 浏览

android - 让 web 字体与 phonegap 和 android 一起工作 - 如何?

PhoneGap 是否支持网络字体,如果支持,您如何使用它们。我目前在我的页面中有此代码,但它在加载到模拟器时不起作用(在 android 应用程序中,我没有尝试通过浏览器加载页面)...

当我在 Firefox 中加载我的页面时,它确实有效,所以我不确定我做错了什么。

说字体 CSS 是由 fontsquirrel 生成的可能会有所帮助

谢谢 :) 乔尔

0 投票
3 回答
6461 浏览

html - Webfonts 在 Windows、Mac 和 Linux 上呈现不同

我第一次在我目前正在制作的网站上使用 webfonts,我注意到字体的边界框在 Windows 和 Linux 和 Mac 上似乎不同(在 Linux 和 Mac 上相同)。这不依赖于浏览器,因为所有操作系统上相同版本的 Chrome 和 Firefox 都有这些差异。基本上,在 Windows 上,字符顶部有额外的空间,而在 Linux 和 Mac 上,字符的边界框更接近字符的实际顶部(例如,变音符号在框外)。这自然会改变仓位、边距等的行为方式。

目前字体定义如下:

因此,例如,我无法正确地将文章的装饰首字母大写垂直对齐到文章的第一行,因为它在不同操作系统上的位置不同。

谁能想到任何解决方案?

0 投票
8 回答
5970 浏览

css - 有没有办法修复 fonts.com @font-face 声明?

许多流行的字体似乎可以从http://webfonts.fonts.com/专门用于网络使用

但是,它以一种非常奇怪的方式工作。他们不给你直接的字体 URL,而是给你一个引用字体文件的 CSS 文件。我认为 CSS 中的字体 URL 可能是临时的,并且会随着时间而变化,以防止未经授权的使用。所以你必须使用他们的CSS,你不能直接合并字体文件的URL(据我所知)。

反过来,CSS 不是我认为的那样。而不是(简化):

这是:

因此,您不能这样做:

相反,在任何你font-weight: bold使用. 我以粗体为例,但除了.font-family: "Foo Bold"<strong>font-stylefont-weight

他们将此解释为 iOS 错误的解决方法(“这是一项功能!”):http ://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone -and-ipad-devices/

但该错误已在 iOS 4.2 中修复:http: //blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/

使用此设置,除非我遗漏了什么,否则我无法使用任何第三方 CSS 或尝试使用的脚本font-weight,因为 fonts.com 的方法完全破坏了font-weightfont-styleCSS 属性。您必须为“mybold”或类似的东西创建一个自定义 CSS 类来将 font-family 设置为“Foo Bold”,而不是使用 font-weight。即他们打破了标准的CSS。(我错过了什么?)

也许他们会在某个时候解决这个问题。但与此同时,谁能想到一个理智的解决方法?没有办法根据他们的“Foo Bold”等@font-face定义家庭“Foo”。定义在那里?编写一些疯狂的 JavaScript 从他们的 CSS 中提取 URL,然后动态定义我自己的 @font-face?

(“对另一个服务使用不同的字体”不算作答案;-) 是的,我已经想到了,但我想知道是否有办法通过以某种方式调整他们的 CSS 来“修复”webfonts.fonts.com我自己的 CSS 规则或 JavaScript。)

0 投票
1 回答
350 浏览

firefox - Firefox 中的 HTML 字体奇怪的行为

我在 Firefox 中注意到了这种奇怪的行为,似乎字体有一些五颜六色的噪音。该示例显示在图像中。

firefox和其他浏览器的区别

有谁知道如何解决这个问题?使用一些 CSS 媒体类型(现在是屏幕)?

我正在使用 Firefox 4.0.1。

任何帮助表示赞赏。

0 投票
2 回答
4629 浏览

firefox - 使用 Google Web 字体...字体在 Firefox 中加载时“闪烁”。我的代码有什么问题?

我正在开发的网站上使用 Google Web Fonts。在我关心的所有浏览器上一切都很好,除了 Firefox。看一看:

http://033ac16.netsolhost.com/

请注意,我正在使用Jefferey Sambells 的 HTML5 Boilerplate Template for Wordpress

另请注意,我尝试过Paul Irish 的 Fighting FOUT 代码无济于事(也许我实现不正确?)

请帮忙!

0 投票
2 回答
39303 浏览

css - 压缩字体以在 Web 中使用

在用作 webfonts 之前可以以某种方式压缩字体吗?我有一个 150kB 的字体文件。能不能压缩一下。

而且,如果我同时调用这两种字体.eot并且.ttf都将被浏览器下载?

0 投票
2 回答
3430 浏览

php - 使用 php gd 和 google webfonts 向图像添加文本

如果我想使用 google webfonts 的字体向图像添加文本,可以吗?使用 PHP 图像 GD