使用css设置字符宽度
我需要设计一个简单的标志与css和一切都很好,除了字母大小。要求使用verdana字体,但要使用如图所示的宽字符。然而,在当前的代码中,它们看起来很窄。在不使用图像的情况下,是否仍然可以实现此行为 我不是在寻找字母间距,而是如何使字符本身占据一定数量的像素。例如,我希望字母使用css设置字符宽度,css,webfonts,graphical-logo,Css,Webfonts,Graphical Logo,我需要设计一个简单的标志与css和一切都很好,除了字母大小。要求使用verdana字体,但要使用如图所示的宽字符。然而,在当前的代码中,它们看起来很窄。在不使用图像的情况下,是否仍然可以实现此行为 我不是在寻找字母间距,而是如何使字符本身占据一定数量的像素。例如,我希望字母t的字体大小(高度)为30px,宽度为标准宽度的两倍 宽图像: 带有代码的标准徽标: 以下是徽标的当前格式: .brand { color: white; display: block; float:
t
的字体大小(高度)为30px,宽度为标准宽度的两倍
宽图像:
带有代码的标准徽标:
以下是徽标的当前格式:
.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;
}
您要查找的是
变换:缩放(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);
您必须为所有浏览器指定它,至少现在是这样
编辑:
我忘了链接。您的代码示例看起来不像Verdana weight 700 选择正确的 字体系列:“Verdana”; 字号:700
将给出正确的结果,至少在安装了Verdana的系统上是这样。我在这个主题上找到的最佳解决方案。非常好!让我吻你!如果调整比例也会移动元素,则可能需要包括变换原点。