标签: google-font-api

所以我被迫在一个我正在开发的网站上使用@ font-face,并且不得不说与Google字体相比,我对交叉浏览器渲染质量印象深刻,但它似乎确实对http请求与Cufon相比,因为每个字体需要四个变体用于正文复制,有时需要一对标题.

我一直与cufon合作,因为我发现它是灵活,可靠的跨浏览器和移动,并且尽管偶尔有一些奇怪的空白问题,但易于使用.我对谷歌字体做的不多,因为在某些浏览器中渲染很糟糕.

显然技术已经发展了!这三者有何不同,三者中是否有任何严重的缺陷？

我想知道从Google字体加载字体的最佳方法是什么.我用Google搜索并创建了<link/> 比...更好的方式@import.有没有工具可以通过网络和浏览器测量速度和性能？怎么样的JavaScript方法？

<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

要么

@import url(http://fonts.googleapis.com/css?family=Oswald:300);

要么

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Oswald:300:latin' ] }
  };
  (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> 

我从Google Web Fonts下载了Open Sans Condensed Light字体,并附上了他们的CSS代码:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
      rel='stylesheet' type='text/css'>

但除了Firefox之外的每个浏览器都显示出确切的字体系列,即它在IE,Chrome,Safari中看起来很好,但在Firefox中却看不到.

这是我的CSS和HTML代码:

h2.title-border {
    border-bottom: 1px solid #000;
    margin-top: 10px;
    line-height: 45px;
    margin-bottom: 15px;
}

.heading-sub {
    background: #000;
    font-family: "Open Sans Condensed Light";
    font-weight: normal;
    text-transform: none;
    font-size: 32px;
    padding: 0 15px;
    margin-bottom: 0px;
    color: #fff;
    border-bottom: 1px solid #000;
}

HTML:

<h2 class="title-border"><span class="heading-sub">About Us</span></h2>

能否请您建议,我应该如何修复Firefox？

我正在使用Google Fonts中的Ubuntu字体:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />

我的样式表:

body {
    font-family: 'ubuntu',arial;
}

它可以工作,但如果安装一个具有相同名称的字体(Ubuntu),它将覆盖来自Google字体的字体.

是否可以强制浏览器使用Google字体中的那个？

我之前使用过插件WP Google Fonts,它也没有我要求的功能.

目前我正在使用当前使用的主题中已实现功能的Google字体.嵌入字体没有问题,它们显示正确.

现在有很多博客都有很好的可读性高清显示平滑字体,我也想要那些字体.正如我的WordPress中所见,它能够显示它们,例如:

没有锋利的边缘,没有像素等.这就是我想要的.

我选择"Droid Sans"作为我文章的字体.但是这个字体显示有锋利的边缘和像素化.示例如下:

(请注意,在新标签页中打开此图片可以更清楚地显示问题.)

有什么东西可以让它看起来光滑而又酷炫吗？

• 这只是错误的字体吗？我没有受到它的约束,并尝试了其他一些字体.他们似乎都有那些尖锐的边缘.如果您知道要比较的字体,请注意.
• 我必须添加一个CSS代码片段吗？
• 它是服务器端配置吗？

如何在文章页面中实现流畅的字体？

我想使用Google Fonts目录中的字体集合.我选择了样式并link在项目模板中包含CSS 标记.

或者,使用谷歌字体,您也可以下载该集合,你得到的是一个包含所有字体样式的zip文件.

我可以创建一个与Google允许我在HTML中包含的CSS相当的CSS,因此如果访问者无法访问Google Font API,我想提供自托管字体文件作为后备.

如何设置此功能,并防止下载Google字体文件和自托管字体文件？如果用户可以访问Google字体,则浏览器不应下载该字体的自托管版本.

我正在尝试优化我的移动网页的加载速度,为此我正在使用该网站:

• https://developers.google.com/speed/pagespeed/insights

这个网站评估我的来源并告诉我我可以改进什么.在我的网站上我下载了一个字体:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

并且显然这阻止了我的页面的渲染.现在,如果这是JavaScript我可以使用async标签中的单词,它将解决问题,但这不是我正在加载的javascript文件!

反正有没有阻止我的浏览器阻止我的浏览器,并迫使它等待下载？

在这个网站http://themescreators.com/ela/我正在使用一些谷歌字体.所有这些都在Chrome,FF上运行良好..但在Windows 7上的IE 10和11上,"蒙特塞拉特"字体不显示.我真的不知道可能是什么问题,IE是否与一些谷歌字体不兼容？

如果您访问Windows 7上的网站,您将清楚地看到问题,所有"蒙特塞拉特"h1,h2 ......都不可见.

提前致谢!

我正在使用我在笔记本电脑上下载的Roboto Condensed字体,用于使用matplotlib绘制的数字.我想知道是否有可能从谷歌字体"即时"导入字体,如CSS @import,并直接使用它与matplotlib.

我正在使用Jupyter笔记本进行python.有可能通过它吗？

最好的,F.

我们使用的Google字体(Pacifico)最近对首都'L'进行了相当彻底的重新设计.当我们将这个用于我们的产品时,其名称乞求"L",这导致我们的产品外观发生了相当根本的变化.

深入研究它,我注意到字体的url已经改变了

fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCXYhjbSpvc47ee6xR_80Hnw.woff2

至

fonts.gstatic.com/s/pacifico/v8/Q_Z9mv4hySLTMoMjnk_rCXYhjbSpvc47ee6xR_80Hnw.woff2

但是之前的v7网址仍然有用.所以,现在,我已经为该版本添加了硬编码字体引用.

但是,是否可以链接到特定版本的字体？

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

那么,不知何故在上面的链接中指定一个版本？

我尝试了各种猜测,例如:

https://fonts.googleapis.com/css?family=Pacifico&version=7
https://fonts.googleapis.com/css?family=Pacifico&version=v7
https://fonts.googleapis.com/css?family=Pacifico:v7

但无济于事.