标签: google-font-api

如何关闭本地字体来测试谷歌字体?

现有技术:

有没有办法在任何浏览器中临时禁用系统字体?

我能找到的唯一解决方案是将字体命名为不与本地字体冲突的字体.我不喜欢那个解决方案的原因:

  1. 我宁愿用正确的名字来引用字体.

  2. 它不能通过样式表与内联字体一起使用,例如Google如何提供字体.

那么,有谁知道怎么样?

css firefox fonts google-chrome google-font-api

18
推荐指数
2
解决办法
4908
查看次数

Google字体无法在Safari上运行

我正在努力让我的网站在Safari和Chrome下看起来一样.在Chrome中,它看起来就像我想要的那样.主要问题是Google Font似乎没有在Safari下加载.因为我使用的是Google字体网站上提供的确切代码,我无法理解为什么Safari无法获取它.它是否与Safari不兼容,我必须依赖后备字体?

该网站可以在这里找到

css safari google-font-api

17
推荐指数
6
解决办法
5万
查看次数

我怎样才能将拉丁子集与Google字体WOFF2文件一起使用?

我想用谷歌字体添加一个字体,我注意到一个奇怪的行为.

我想添加一个只有拉丁子集的字体,我不想要latin-ext,cyrillic或者cyrillic-ext子集,以减轻代码.我明白这是默认行为,所以我这样做了:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher">
Run Code Online (Sandbox Code Playgroud)

在Firefox(以及其他不支持WOFF2的浏览器)中,我得到了正确的输出:

@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLbrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}
Run Code Online (Sandbox Code Playgroud)

但在Chrome中,我得到了这个:

/* cyrillic */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLV4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLZQV2lvL5Ba9FjAYK6Lx0Qk.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, U+2215, U+E0FF, U+EFFD, U+F000;
}
Run Code Online (Sandbox Code Playgroud)

我想,也许拉丁子集不再是默认行为了,所以我添加了我<link>subsetGET参数:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin"> …
Run Code Online (Sandbox Code Playgroud)

webfonts woff google-font-api

17
推荐指数
1
解决办法
4089
查看次数

使用css缩小进行远程字体导入

我正在尝试连接和缩小所有bower包资产,包括css.其中一个是bootswatch设计,它导入谷歌字体.问题是,在其上运行css任务会导致超时异常.我猜它是试图下载这些字体,它需要太长时间,因为每次都不会发生异常.

我该如何解决它?

Gulp进口:

var gulpMinifyCss = require('gulp-minify-css');
var gulpConcatCss = require('gulp-concat-css');
var mainBowerFiles = require('main-bower-files');
var gulpFilter = require('gulp-filter');
Run Code Online (Sandbox Code Playgroud)

Gulp任务:

gulp.task('compileBowerCss', function(){
    return gulp
        .src(mainBowerFiles())
        .pipe(gulpFilter('*.css'))
        .pipe(gulpConcatCss('bower.css'))
        .pipe(gulpMinifyCss())
        .pipe(gulp.dest(assetsFolder + cssFolder));
});
Run Code Online (Sandbox Code Playgroud)

例外:

events.js:85
  throw er; // Unhandled 'error' event
        ^
Error: Broken @import declaration of "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" - timeout
Run Code Online (Sandbox Code Playgroud)

单独运行此任务,其他任何事情都无法正常工作(据我所知,通过极限测试),但与其他任务一起运行会导致提到的错误.

css google-font-api gulp gulp-minify-css gulp-clean-css

17
推荐指数
1
解决办法
4191
查看次数

使用谷歌字体,仅包含[AZ]和"&"

有没有办法使用谷歌字体,只加载[A-Z]&符号字符?

我想这样做是为了减小尺寸并缩短加载时间,因为我只会使用基本的拉丁数字和字母.

如果必须的话,我可以自己托管字体,操作字体包是合法的,但我不确定是否需要自托管以及如何操作google的字体包.

我已经指定了A-Z这样的:

http://fonts.googleapis.com/css?family=Inconsolata&text=ABCDEFGHIJKLMNOPQRSTUVWXYZ
Run Code Online (Sandbox Code Playgroud)

但指定&很麻烦.这两个都不起作用:

<link href='http://fonts.googleapis.com/css?family=Inconsolata&text=ABC&amp;' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata&text=ABC&' rel='stylesheet' type='text/css'>
Run Code Online (Sandbox Code Playgroud)

webfonts google-font-api google-webfonts

16
推荐指数
2
解决办法
3690
查看次数

如何在Stylus文件中导入Google字体?

我想知道如何从手写笔(.styl)文件导入Google字体.我试过了:

@import url(http://fonts.googleapis.com/css?family=Overlock:400,700,400italic,700italic|Calligraffitti)
Run Code Online (Sandbox Code Playgroud)

...但在使用以下错误进行编译时,我的控制台失败了:

Potentially unhandled rejection [2] ParseError: C:\Users\Coutinho\Documents\GitHub\bespoke-theme-fancy\lib\theme.styl:5
   1| // Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
   2| // Stylus: http://learnboost.github.io/stylus
   3|
   4| @import 'normalizecss/normalize.css'
 > 5| @import url(http://fonts.googleapis.com/css?family=Overlock:400,700,400italic,700italic|Calligraffitti)
   6|
   7| $font-family-serif 'Calligraffitti', cursive
   8| $font-family-sans 'Overlock', Helvetica, sans-serif

expected ")", got "selector |Calligraffitti)"
Run Code Online (Sandbox Code Playgroud)

谢谢!

stylus google-font-api

16
推荐指数
1
解决办法
6976
查看次数

使用Google字体时,Bootstrap图标(Glyphicons)略微向上,我该如何解决这个问题?

如果我在文档的head标记中添加以下Google字体

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">
Run Code Online (Sandbox Code Playgroud)

Bootstrap图标(Glyphicons)略微向上,您可以在此链接中看到:http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

在此输入图像描述

我该如何解决这个问题?

document css3 google-font-api twitter-bootstrap glyphicons

15
推荐指数
3
解决办法
3万
查看次数

Heroku没有加载谷歌字体

我在Heroku上运行一个网站,并且在加载谷歌字体时遇到了一些麻烦.

我的typography.sass文件包含:

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

h1
  font-family: 'Bitter', Helvetica, serif
Run Code Online (Sandbox Code Playgroud)

我的production.rb文件包含以下行:

config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true
Run Code Online (Sandbox Code Playgroud)

我的Gemfile包括:

gem 'rails_12factor', group: :production
Run Code Online (Sandbox Code Playgroud)

我已经完成了资产管道的所有Heroku问题,并且我已经将所有图像和css文件正确地加载到生产中,但无论出于何种原因,该字体仅适用于开发.

heroku google-font-api ruby-on-rails-4

14
推荐指数
1
解决办法
7188
查看次数

CSS:禁用所有浏览器中的字体连字

由于谷歌字体在中国被屏蔽,我不得不下载它们并使用FontSquirrel进行转换.

问题:fi/ff /等很难看

我在这里做了所有的步骤通过CSS防止Safari(Mavericks/iOS7)中的连字,但没有雪茄.

如何一次禁用连字? -webkit-font-variant-ligatures: no-common-ligatures; 不行

css fonts css3 google-font-api ligature

14
推荐指数
2
解决办法
7828
查看次数

-webkit-font-smoothing只适用于Mac浏览器,而不是Windows吗?

-webkit-font-smoothing属性是否仅适用于Mac浏览器,而不适用于Windows?我正在使用Google字体,并尝试在Google Chrome for Windows中使其流畅.我发现-webkit-font-smoothing: antialiased;是谷歌搜索的解决方案,但它在我的谷歌浏览器上没有任何差别(Windows)

css webkit google-chrome css3 google-font-api

13
推荐指数
1
解决办法
5258
查看次数