CSS 大字体，细字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15329352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Big Font Size, Thin Letters
提问by Ali Bassam
Let's say I use font-size:30px;and font-family:Verdana;.
假设我使用font-size:30px;and font-family:Verdana;。
I need those letters to be big, but yet thin, so I tried font-weight:lighter;.
我需要这些字母大而细，所以我尝试了font-weight:lighter;.
Yet nothing changes, some fonts will become smaller, some wont be affected.
但是没有任何变化，有些字体会变小，有些则不会受到影响。
How can I create big but thin letters? Is there a way in CSS, or these are specific fonts?
如何创建大而细的字母？CSS 中有没有办法，或者这些是特定的字体？
采纳答案by eggy
To achieve a skinnier version of Verdana, due to the font not supporting certain weights, you will have to host your own version of the font, or use another font already hosted to achieve your look.
要获得更薄的 Verdana 版本，由于字体不支持某些权重，您必须托管自己的字体版本，或使用已托管的其他字体来实现您的外观。
Some fonts do not support lighter/heavier versions of themselves - if they do, they may not align with the CSS numerical scale (as you pointed out).
某些字体不支持较轻/较重的自身版本 - 如果支持，则它们可能与 CSS 数字比例不符（如您所指出的）。
From here.
从这里开始。
Because so many professional quality web fonts come in a variety of weights, it now makes much more sense to use the numerical scale than it did when we only had to deal with ‘normal' (400) and ‘bold' (600). Typically, a family's weights can be mapped to these values:
100: Ultra Light
200: Thin
300: Light
400: Regular
500: Semi Bold
600: Bold
700: Extra Bold
800: Heavy
900: Ultra Heavy
Note the keyword, there: typically. The reality, sadly, is that many fonts just don't conform to this pattern, like when a family has a multitude of weights, or where their own definitions don't necessarily conform to the standard scale.
因为如此多的专业质量的网络字体有各种不同的权重，所以现在使用数字比例比我们只需要处理“正常”（400）和“粗体”（600）时更有意义。通常，一个族的权重可以映射到这些值：
100：超轻
200：薄
300：光
400：常规
500：半粗体
600：粗体
700：加粗
800：重
900：超重型
注意关键字，那里：通常。可悲的是，现实情况是，许多字体不符合这种模式，例如当一个系列有多个权重时，或者他们自己的定义不一定符合标准比例时。
So, long story short, you will have to either host a "thinner" version of the font (one you either made/downloaded), or use a different font.
因此，长话短说，您将不得不托管字体的“更薄”版本（您制作/下载的），或者使用不同的字体。
IMO Tahoma, Hedley or Geneva are similar-looking fonts, however these are not freely available - you can look on Google fontsfor some, that both you and @minitechpointed out.
IMO Tahoma、Hedley 或Geneva 是外观相似的字体，但是这些不是免费提供的-您可以在Google 上查找一些字体，您和@minitech 都指出了这些字体。
回答by npage
This is the closest thing I came up with.
这是我想到的最接近的事情。
div{
font-family:Verdana;
font-size:30px;
font-weight:100;
-webkit-text-stroke-color: rgb(255,255,255);
-webkit-text-stroke-width: 1px;
-webkit-font-smoothing: antialiased;
}
Problems:
1. Only works with webkit browsers (Safari,Chrome)
2. If the background behind the text isn't a solid color then it will be visible that it is a text stroke.
http://jsfiddle.net/dru87/
问题：
1. 仅适用于 webkit 浏览器（Safari、Chrome）
2. 如果文本背后的背景不是纯色，则可以看出它是文本笔触。
http://jsfiddle.net/dru87/
回答by Rahul Shah
Choose a thin font and apply bigtext.js/fittext.jsor slabtext.js
选择一种细字体并应用bigtext.js/fittext.js或slabtext.js
回答by Sara Farooqui
Not all fonts supports all widths. If you are looking for some good thin fonts. You can take a look at these thin google fontslist. They are free and easy to implement.
并非所有字体都支持所有宽度。如果您正在寻找一些好的细字体。你可以看看这些瘦谷歌字体列表。它们是免费且易于实施的。
回答by amit sharma
Step1: Include in to load fonts from Google
步骤 1：包括在从谷歌加载字体
https://fonts.googleapis.com/css?family=Lato:100italic' rel='stylesheet' type='text/css'> https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
https://fonts.googleapis.com/css?family=Lato:100italic' rel='stylesheet' type='text/css'> https://fonts.googleapis.com/css?family=Lato:100' rel ='样式表' type='text/css'>
Step2: Add following css properties .text{ font-family: Lato, sans-serif;
Step2：添加如下css属性 .text{ font-family: Lato, sans-serif;
font-weight: 100;
字体粗细：100；
font-size: 7em; }
字体大小：7em；}
Done!
完毕！
will work definitely
肯定会工作
For more info visit http://tobiasahlin.com/typesource/01-elements-of-html-and-css/
有关更多信息，请访问http://tobiasahlin.com/typesource/01-elements-of-html-and-css/
回答by Jukka K. Korpela
The use of font-weightmeans asking for different-weight typefaces (specific fonts) from the font-family. The Verdana font family has no typeface lighter than normal, so you get just normal. This applies to most fonts that you can normally use on web pages.
使用font-weight意味着从字体系列中要求不同粗细的字体（特定字体）。Verdana 字体系列没有比普通字体更亮的字体，因此您可以使用普通字体。这适用于您通常可以在网页上使用的大多数字体。
In Google Web Fonts, for example, you can find many font families with typefaces lighter than normal, e.g. Source Sans Pro has weights 200 and 300.
例如，在Google Web Fonts 中，您可以找到许多字体比正常字体更轻的字体系列，例如 Source Sans Pro 的粗细为 200 和 300。
Note: The lightness of a typeface is relative to the font. What is light (200) in font family might correspond to what is normal (400) in another font family.
注意：字体的亮度与字体有关。字体系列中的浅色 (200) 可能对应于另一个字体系列中的正常 (400)。
