CSS 用css设置字符宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15262094/
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
setting character width with css
提问by Kiran
I need to design a simple logo with css and everything is fine except for the letter size. Requirement is to use verdana font but with wide characters as shown in the image. However, with current code they look narrow. Is there anyway to achieve this behavior without using images?
我需要用 css 设计一个简单的标志，除了字母大小外，一切都很好。要求是使用 verdana 字体，但具有如图所示的宽字符。但是，使用当前代码，它们看起来很窄。有没有办法在不使用图像的情况下实现这种行为？
I am not looking for letter spacing, but how to make the character itself occupy a set number of pixels. For example, I want letter tto have 30px font size (height) and double the standard width..
我不是在寻找字母间距，而是如何让字符本身占据一定数量的像素。例如，我希望 lettert具有 30px 字体大小（高度）和标准宽度的两倍。
Wide Image:
宽图像：
Standard Logo with code:
带代码的标准标志：
Here is the current formatting for the logo:
以下是徽标的当前格式：
.brand {
color: white;
display: block;
float: left;
font-size: 40px;
font-weight: 200;
margin-top: 5px;
margin-bottom: 5px;
padding: 27px 20px 13px 20px;
letter-spacing:2px;
text-transform: full-width;
background: #083D68;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-box-shadow: inset 4px -4px 13px 0 #333;
-webkit-box-shadow: inset 4px -4px 13px 0 #333;
box-shadow: inset 4px -4px 13px 0 #333;
}
回答by Austin Mullins
What you're looking for is transform:scale(x, y). For example:
你要找的是transform:scale(x, y). 例如：
-webkit-transform:scale(2.0, 1.0);
-moz-transform:scale(2.0, 1.0);
-ms-transform:scale(2.0, 1.0);
-o-transform:scale(2.0, 1.0);
transform:scale(2.0,1.0);
You kind of have to specify it for all the browsers, at least for now.
您必须为所有浏览器指定它，至少现在是这样。
Edit:
编辑：
I forgot to link my jsfiddle.
我忘了链接我的 jsfiddle。
回答by Sascha
Your Code-Example does not look like Verdana weight 700.
您的代码示例看起来不像 Verdana 重量 700。
Choosing the right
选择正确的
font-family: 'Verdana'; font-weight:700;
字体系列：'Verdana'; 字体粗细：700；
would give the correct result, at least on systems with Verdana installed.
至少在安装了 Verdana 的系统上会给出正确的结果。
