指定 Google 字体的样式和粗细 [英] Specifying Style and Weight for Google Fonts
问题描述
我在我的一些页面中使用了 Google 字体，并在尝试使用字体变体时碰壁了.示例:http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+无
I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
我正在通过链接标签导入三个面:Normal、Bold、ExtraBold.正常人脸显示正确，但我不知道如何在我的 CSS 中使用字体的变体
I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS
我尝试了以下所有作为 font-family 属性但没有骰子的属性:
I tried all of the following as attributes for font-family but no dice:
- 'Open Sans Bold'
- '打开 Sans 700'
- '打开 Sans Bold 700'
- 'Open Sans:Bold'
谷歌文档本身并没有提供太多帮助.有人知道我应该如何编写 CSS 规则来显示这些变体吗?
The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?
推荐答案
他们使用常规 CSS.
They use regular CSS.
只需像这样使用您的常规字体系列:
Just use your regular font family like this:
font-family: 'Open Sans', sans-serif;
现在您可以通过添加来决定字体应具有的权重"
Now you decide what "weight" the font should have by adding
用于半粗体
font-weight:600;
粗体 (700)
font-weight:bold;
加粗 (800)
font-weight:800;
像这样它的后备证明，所以如果谷歌字体应该失败"，你的备用字体 Arial/Helvetica(Sans-serif) 使用与谷歌字体相同的粗细.
Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.
很聪明:-)
请注意，必须通过标题中的链接标签 url(谷歌字体 url 的系列查询参数)专门导入不同的字体粗细.
Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.
例如，以下链接将包含权重 400 和 700:
For example the following link will include both weights 400 and 700:
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
这篇关于指定 Google 字体的样式和粗细的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
