标签: google-webfonts

如何在CSS文件中导入Google Web Font?

我正在使用CMS,我只能访问CSS文件.所以,我不能在文档的HEAD中包含任何内容.我想知道是否有办法从CSS文件中导入Web字体?

css fonts css3 google-webfonts

238
推荐指数
7
解决办法
63万
查看次数

包括Google Web Fonts链接还是导入?

将Google Web Fonts包含在页面中的首选方法是什么?

  1. 通过链接标签?

    <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>
  2. 通过样式表中的导入?

    @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);
  3. 或使用网络字体加载器

    https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

168
推荐指数
4
解决办法
7万
查看次数

Google Chrome中是否有"字体平滑"?

我正在使用google webfonts并且它们的超大字体尺寸很好,但是在18px时,它们看起来很糟糕.我已经在这里和那里阅读过有字体平滑的解决方案,但是我没有找到任何明确解释它的地方,而且我发现的几个片段根本不起作用.

我的h4浏览器看起来很糟糕,但Chrome是最糟糕的.在Chrome中,几乎所有字体看起来都很糟糕.

谁能指出我正确的方向?也许您知道一种资源可以清楚地解释这一点吗?谢谢!

示例SCREENSHOT#1

此屏幕截图显示了https://www.dartlang.org/的主页,这是一种由Google制作的编程语言(因此我们可以暗示该网站也是由Google构建的)并使用Google Webfonts.

屏幕截图显示左侧的Google Chrome,右侧的Firefox/Internet Explorer:

左边是谷歌浏览器,右边是firefox/internet explorer

示例SCREENSHOT#2

此屏幕截图显示了Adobe.com上的产品信息页面,使用Typekit提供的webfonts.Adobe和Typekit在字体方面是专业人士.

屏幕截图显示右侧的Google Chrome,左侧的Firefox/Internet Explorer:

左边是谷歌浏览器,右边是firefox/internet explorer

css fonts google-chrome css3 google-webfonts

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

如何让Google字体在IE中运行?

我一直在开发一个使用Google Fonts API的网站.它很棒,据说已经在IE中测试过,但是在IE 8中进行测试时,字体根本就没有被设计样式.

我按照Google的指示包含了字体,因此:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />
Run Code Online (Sandbox Code Playgroud)

并在CSS中将其名称添加到字体系列的前面:

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}
Run Code Online (Sandbox Code Playgroud)

就像Chrome,Firefox,Safari中的魅力一样.IE 8中没有骰子.任何人都知道为什么?

css internet-explorer webfonts google-webfonts

67
推荐指数
4
解决办法
14万
查看次数

Google字体无法在Google Chrome上呈现

我正在构建一个新的WordPress主题(不知道这是否相关)并且这个问题一直困扰着我.

我已经从Google Webfonts加载了Roboto Slab(包括CSS <head>部分).在其他所有浏览器上,除了谷歌浏览器外,字体呈现正常.当我第一次在谷歌浏览器中加载网站时,使用该自定义字体的文本不会全部显示(即使字体堆栈具有格鲁吉亚作为后备 - "Roboto Slab", Georgia, serif;).在我悬停样式链接或重新触发Inspector中的任何CSS属性后 - 文本变得可见.

自从我前段时间开始这个主题以来,我可以清楚地记得它之前完美无缺.这是最近一些已知的Chrome更新错误吗?

首次加载: 截屏#1

在我重新应用任何CSS属性后,进入响应式视图或悬停元素: 屏幕截图#2

有人有类似的问题吗?我该怎么办呢?

谢谢!

html css google-chrome google-webfonts

65
推荐指数
4
解决办法
8万
查看次数

Google网络字体中"latin"与"latin-extended"字形支持的语言?

Google Web Fonts选择字符集

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

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

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

我希望答案看起来像:

Latin Character Set & Supported Languages:

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

Latin-Extended Character Set & Supported Languages:

- ..........
- ..........
- ..........
Run Code Online (Sandbox Code Playgroud)

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

fonts glyph webfonts google-webfonts

60
推荐指数
1
解决办法
4万
查看次数

谷歌网页字体在Windows上的Chrome中呈现出不稳定状态

我在我的网站上使用Google Webfonts服务并严重依赖它.它在大多数浏览器上呈现得很好,但在Windows上的Chrome中它呈现得特别糟糕.非常不稳定和像素化.

到目前为止我发现的是Chrome需要首先加载.svg格式字体.我使用的字体,称为Asap,仅在.woff中可用.我使用免费在线服务将其转换为.svg,但当我将其添加到我的样式表(在.woff之前)时,它没有改变任何东西.

我也尝试过:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;
Run Code Online (Sandbox Code Playgroud)

希望这两者可以帮助文本更顺利地呈现.

现在我已经没有想法,我不想改变字体.有谁知道我怎么能解决这个问题?我一直在使用Adobe Browserlab来测试渲染,看看我只拥有一台mac.该网站的链接是:www.symvoli.nl/about

提前致谢!

编辑2013年4月11日:

Chrome 35 Beta似乎终于解决了这个问题:

在此输入图像描述

css fonts svg google-chrome google-webfonts

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

将Web字体转换并渲染为base64 - 保持原始外观

我想在我的网站上推迟字体加载,灵感来自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;
}
Run Code Online (Sandbox Code Playgroud)

问题是,该转换后的字体看起来非常不同.看看Open Sans Bold: GWF与base64渲染比较

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


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

css fonts base64 webfonts google-webfonts

40
推荐指数
2
解决办法
5万
查看次数

如何从(官方)Google Web Fonts repo下载多种格式的Web字体?

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

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

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

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

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

webfonts google-webfonts

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

IE9 - CSS3111:@ font-face遇到未知错误

我从http://www.google.com/webfonts嵌入了三个Google字体(Dosis,Open Sans,Lato)

它们都可以正常工作,除了它返回的IE9:

CSS3111: @font-face encountered unknown error. 
2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot

CSS3111: @font-face encountered unknown error. 
KlmP_Vc2zOZBldw8AfXD5g.eot

CSS3111: @font-face encountered unknown error. 
zLhfkPOm_5ykmdm-wXaiuw.eot
Run Code Online (Sandbox Code Playgroud)

并偶尔打破整个网站.

可以做些什么来解决这个问题?

fonts internet-explorer css3 google-webfonts

32
推荐指数
2
解决办法
5万
查看次数