标签: webfonts

这真让我抓狂.

只是在IE9上测试一个网站,发现'live'版本正在渲染一个我使用的小字体,而不是开发版本.

以下是一系列屏幕抓取:

我正在使用Font Squirrel @ font-face工具包.正如您所看到的,在查看本地版本的网站时,Firefox,Chrome甚至IE9都可以.

本地版本和实时版本之间的唯一区别是该字体是从实际站点上的不同域加载的(我已正确设置了跨域策略,如其在Firefox和Chrome上运行的事实所示).

我不记得它在IE8中的样子(微软,再次,没有想到开发人员,已经在IE8的顶部安装了IE9而无法同时运行它们)

该网站位于http://enplanner.com,因此您可以查看来源.

任何有关这方面的帮助将非常感激 - 谢谢你提前.

编辑:我已经删除了IE9并发现它在本地和IE8中看起来完全相同.看来IE8有一个优秀的渲染引擎,比IE9更接近FF/Chrome.这是一个令人沮丧的发现.

Google Web Fonts上的某些字体支持多个"字符集".问题是,如果我使用的网络字体仅提供"拉丁"字形,那么将页面翻译为不支持字形的语言的用户将清楚地注意到混乱的文本.

我希望我的网络字体支持除英语之外的世界上最流行的语言,例如西班牙语,德语,法语等.

为了这个目的,我想知道,"拉丁语"和"拉丁语"的语言完全符合哪种语言.

我希望答案看起来像:

Latin Character Set & Supported Languages:

- ..........
- ..........
- ..........

Latin-Extended Character Set & Supported Languages:

- ..........
- ..........
- ..........

我无法在Google Web Fonts文档或Google搜索中找到此信息.

我无法在Bootstrap框架下的按钮内垂直对齐字体 - 真棒图标和文本.我尝试了很多东西,包括设置行高,但没有任何工作.

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

我怎样才能让它发挥作用？

Google的Web Fonts API提供了一种定义回调函数的方法,如果字体加载完毕或无法加载等等,是否可以使用CSS3 Web字体(@ font-face)实现类似的功能？

我想在我的网站上推迟字体加载,灵感来自Smashing Magazine的延迟字体加载逻辑.

主要是将字体转换为base64并准备CSS文件.我到目前为止的步骤:

1. 在Google Web Fonts上选择字体并下载它们.
2. 使用Font Squirrel Webfont Generator将下载的TTF文件转换为带有base64嵌入式WOFF字体的CSS文件(专家选项 - > CSS - > Base64编码).
3. 加载CSS文件异步(这里不重要).

Open Sans Bold的CSS片段:

@font-face {
  font-family: 'Open Sans';
  src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
  font-weight: 700;
  font-style: normal;
}

该问题是,该转换后的字体看起来非常不同.看看Open Sans Bold:

尤其是注意口音和绝对可怕的信件a.其他字体系列和变体看起来也非常明显不同(尺寸和形状扭曲等).

所以问题是:如何将来自Google Web Fonts(或其他来源)的TTF文件正确编码为base64格式,并以与原始文件相同的方式使用它？

对于基于Material UI(React)并使用Webpack构建的渐进式 Web应用程序,如何正确包含Roboto字体,以便应用程序不依赖于Google服务器,并且字体也可以脱机工作？

• 在安装页面只是引用了谷歌网页的字体,但显然迫使字体,从谷歌服务器上下载.

• 关于Roboto字体存在类似的Material UI问题,但仍依赖于Google提供的字体文件.

• 我发现了一个提供Roboto字体文件的NPM包,但是我不知道如何提供这些文件,因为提供了很多样式和字体格式,我不知道Material UI真正需要什么样的样式.此外,仅通过@import导入这些字体系列似乎存在性能问题.

那么,将正确的 Roboto文件与我的应用程序捆绑在一起的优秀而简单的解决方案是什么？

有这么多人将EOT文件用于webfonts(以支持IE8),我无法相信我找不到支持查看它们的单个应用程序.希望我错过了一些明显的东西,但是当我谷歌"eot文件查看器"时,我发现只有几个可能看起来像病毒的网站(那些有100万个不同下载链接的网站都会导致不同的网站上出现随机垃圾).

我正在使用PC,但也有可用的Mac,我有Visual Studio,XCode,Adobe CS3套件以及一系列其他开发人员/图形工具.当然所有流行的网络浏览器也是如此.

我正在解决IE8中的webfont显示问题.它正在使用我的EOT文件,但没有完全像我认为的那样显示它.我想排除在转换问题中丢失的任何东西(我使用过web squirl和ufonts以及其他在线转换器),我只有在我可以直接查看EOT而不是先转换为其他格式或转换时才能这样做EOT的一些其他格式和"假设"它是相同的.

我们使用icomoon作为我们的图标字体,它们在Chrome和Firefox中运行良好,但不会在IE11中显示......有时候.它似乎适用于第一页加载,但不适用于后续页面加载.清除缓存似乎没有重置它.这个问题可能出现在其他IE版本中,现在我们只关注IE11.

这是我们的@ font-face:

@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
    url('fonts/icon.woff?-3q3vo5') format('woff'),
    url('fonts/icon.ttf?-3q3vo5') format('truetype'),
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */

但这里变得奇怪.查看开发人员工具,正在发送字体的HTTP请求,但只接收了几百个字节(可能只是标题).

但HTTP响应正确地将内容长度列为几千字节.

"响应正文"选项卡只显示"无数据可查看".

您可以在网络面板屏幕截图中看到Google字体的行为不是这样的.

在位置栏中粘贴URL会导致下载完整文件.

在这种情况下我该怎么办？当我在浏览器上运行AngularJS App时,我在控制台上看到了这个:

检测到慢速网络.加载时将使用Fallback字体: /bootstrap/dist/fonts/glyphicons-halflings-regular.woff2

我也看到加载时字体在变化.

我了解到Google会根据从中访问的浏览器/设备自动提供TTF,EOT,WOFF或SVG字体文件.

现在我计划从我的服务器本身托管和提供字体文件,为此我首先必须下载网络字体的所有文件格式.

我如何或在哪里下载我想使用的网络字体的4种文件格式？

PS:通过使用不同的浏览器 - Chrome,IE9和Safari(dev - iPhone UA),我能够获得WOFF,EOT和TTF格式.但是,SVG格式没有运气.如果有一种更简单的方法,它会很棒.

编辑:哦,顺便说一句,我知道我可以从fontsquirrel下载各种格式,但我说的是从这里的官方回购下载.