标签: google-font-api
所有当前和旧浏览器都支持Google font api吗？
所有当前和旧浏览器都支持Google font api吗？
如果js被禁用,它会起作用吗？
- IE6
- IE7
- IE8
- Firefox 3.0+
- 苹果浏览器
- 铬
- iPhone/iPad版
- 黑莓
推荐指数
解决办法
查看次数
为什么Google字体不能在Firefox上缓存？
我正在尝试在我的网站上使用嵌入式Google字体,并且每次有人访问网站时都包含从Google fonts API下载字体的链接,但我遇到了Firefox的问题,因为它似乎试图下载每次刷新或单击新链接时的字体.
在所有其他浏览器上,它只下载一次并将字体缓存到整个网站,就像任何其他缓存的东西一样.
Google字体API样式表的链接如下:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin' rel='stylesheet' type='text/css'>
推荐指数
解决办法
查看次数
谷歌字体外部CSS Vs在我的CSS中复制外部CSS的代码？
我通过添加外部链接使用谷歌字体
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
这个CSS只有这个代码
@font-face {
font-family: 'Arvo';
font-style: normal;
font-weight: normal;
src: local('Arvo'), url('http://themes.googleusercontent.com/static/fonts/arvo/v3/WJ6D195CfbTRlIs49IbkFw.woff') format('woff');
}
我可以在我的项目css文件style.css中粘贴并使用此代码,或者它是必要的并且更好地将其用作google的外部css链接
推荐指数
解决办法
查看次数
Flexslider真的搞砸了Chrome中的网页
还有其他人有过这种问题吗？我的页面顶部有一个下拉菜单,然后是flexslider,然后是一些常规文本和图像......有两种字体,一种是使用Google字体API调用的,另一种是使用fontFace(以防这是相关的) !)..
在Mac上查看Chrome时,我会遇到一些非常奇怪的行为.每次幻灯片移动时,页面上的所有文本都会变得非常"瘦",并且一些(但不是全部)导航链接会向上和向右"跳跃"一个像素.我没有看到这样的东西,只能假设它是一些奇怪的冲突？我已经测试了我能找到的所有东西,包括Mac上的FF,Opera,Safari和Chrome,IE9,Windows上的Chrome和Windows上的FF.两个版本的Chrome看起来都不太好,但是mac版本更差.
不幸的是,我宁愿不在网上列出我的项目,直到它100%完成,而且我认为制作小提琴的方式太多了.但是在查看实际的flexslider网页后,我发现了同样的错误,如果你看缩略图,你会看到我的意思(如果你当然在Chrome中).- http://flexslider.woothemes.com/thumbnail-controlnav.html
有没有人知道修复,因为我想保留我一直在努力的代码!
推荐指数
解决办法
查看次数
Google 字体字母高度不一致
我在 Chrome 中遇到了一个奇怪的问题，其中 Google 字体显示的字母高度不一致。它仅在我使用时发生，text-transform: uppercase如果我使用font-weight:bold. 我有一些示例代码，您可以在其中看到S单词中的太高了TESTING：
body {
font-family: 'Exo 2' !important;
line-height:1.42857143;
}
div {
width:40px;
}
span.upper {
display:block;
margin-top:20px;
font-size:18px;
text-transform:uppercase;
}
span {text-transform:uppercase; }<link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css">
<div>
Broken:<br>
<a href="#">
<span class="upper">Testing 123</span> </a>
<br>Normal:<br><br>
<span>Testing 123</span>
</div>如果我将字体更改为arial，它是固定的。是否有一些我需要重置的 CSS 属性，以便字体能够正确呈现？
推荐指数
解决办法
查看次数
<head> 中的 Google 字体还是带有 @import 的 CSS？
（我是新来的所以如果这不是问它的地方，请告诉我）
通常我添加<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'>到<head>我的页面。对于多个页面，总是有可能出现不一致/错误，而且更新每个页面可能会令人头疼。
Can I instead just use @import url(http://fonts.googleapis.com/css?family=Open+Sans); at the first line of my main CSS file?
Advantage to this is updating one CSS file rather than updating every single page where it's in the <head>. But I've read some answers that say there may be a resource loading problem...but that discussion was 3 years ago. Can't find a current answer addressing this.
EDIT
To avoid SO from thinking this is …
推荐指数
解决办法
查看次数
从 Google Fonts 导入时操作 unicode-range
我的问题可以看作是这个答案的后续。
我在我的项目中使用了 Google 字体，现在想更改 unicode 范围，因此只有数字会受到影响（请参阅上面的链接答案）。我的问题是我没有让它与包含一起工作：
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
当我像这样导入字体时，字体已经由谷歌生成（谷歌也提供了正确的字体设置以避免跨浏览器问题，非常方便）。我尝试像这样覆盖导入的字体：
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
unicode-range: U+30-39;
}
但这没有用。为了实现仅附加数字的预期效果，我需要从 Google 导入 URL 中获取 CSS 并将其复制到我自己的 CSS/SASS 文档中。但是后来我失去了由 Google Fonts API 完成的跨浏览器服务以及他们 CDN 的速度。
有没有办法在保持 Google 字体导入的同时更改 unicode 范围，或者当我想使用 unicode 范围时是否真的需要自己托管字体？
推荐指数
解决办法
查看次数
Roboto字体大胆与Firefox
我试着在我的网站上安装的Roboto,使用谷歌的字体,我感到绝望看到的Roboto是在Firefox比谷歌浏览器更大胆(更大胆).
这是我的代码:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
和
p
{
font-size: 1.4rem;
line-height: 1.5;
font-family: "Roboto", sans-serif;
letter-spacing: 0;
color: #313131;
}
以下是Roboto Font的两个预览版,首先是Firefox,第二个是Chrome:
如您所见,Chrome Roboto更轻巧.
我不知道为什么会这样,但我在Google Font上找到了一些东西.在他们自己的代码上使用Firebug,我发现他们网站上使用的Roboto字体具有以下属性:
element.style {
font-family: "Roboto script=all rev=1";
}
当你删除"Script = all rev = 1"时,Roboto在Firefox和Chrome中变得更加大胆(但在Firefox中却如此).就像我正在进行的工作一样.
有人有答案,解决方案或什么？我觉得很寂寞,甚至连Google都没有告诉我这是什么script=all rev=1以及为什么它让Roboto在Google Font上更轻松.
推荐指数
解决办法
查看次数
带有Ionic框架的Google字体
我已经制作了一个基于离子框架的应用程序,我正在使用谷歌字体的' Cairo '字体.
当我使用浏览器进行测试时,字体工作正常,但当它来到模拟器时,它显示为方形.
ps:我已经下载了字体并用新路径修改了css文件但仍然无法正常工作.
这是CSS文件:
/* arabic */
@font-face {
font-family: 'Changa';
font-style: normal;
font-weight: 400;
src: local('Changa'), local('Changa-Regular'), url(changa/kJoVtULHl2iZq_3MNTQVo3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
/*unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE80-FEFC;*/
}
/* latin-ext */
@font-face {
font-family: 'Changa';
font-style: normal;
font-weight: 400;
src: local('Changa'), local('Changa-Regular'), url(changa/eZ-9bnVvsIhiJdRpRkxJ4X-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
/*unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;*/
}
/* latin */
@font-face {
font-family: 'Changa';
font-style: normal;
font-weight: 400;
src: local('Changa'), local('Changa-Regular'), url(changa/u5aigp7vZoG41r3MEe43QuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
/*unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, …推荐指数
解决办法
查看次数
Google字体加载优化和缓存
Google的页面速度测试仅显示一个问题:
在上层内容中消除渲染阻止JavaScript和CSS您的页面有1个阻止CSS资源.这会导致呈现页面的延迟.
在不等待加载以下资源的情况下,无法呈现页面上的上述内容.尝试推迟或异步加载阻止资源,或直接在HTML中内联这些资源的关键部分.
优化以下内容的CSS交付:https://fonts.googleapis.com/css？family = Roboto:
300,400
作为fonts.google.com建议加载的字体:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
在<head />标签内.
据我所知,没有办法控制谷歌的字体缓存,而且这个网址的输出依赖于用户代理,所以在本地分发字体是没有意义的.所以,问题是:我该怎么办呢？我如何满足谷歌的速度测试？
推荐指数
解决办法
查看次数
标签 统计
google-font-api ×10
css ×6
fonts ×5
html ×4
css3 ×1
firefox ×1
flexslider ×1
font-face ×1
google-fonts ×1
jquery ×1
pagespeed ×1
webfonts ×1