用css设置字符宽度

Kir*_*ran 14 css css3 webfonts graphical-logo

我需要用css设计一个简单的徽标,除了字母大小外,一切都很好.要求是使用verdana字体,但使用宽字符,如图所示.但是,使用当前代码,它们看起来很窄.反正有没有使用图像来实现这种行为?

我不是在寻找字母间距,而是如何让角色本身占据一定数量的像素.例如,我希望字母的t字体大小(高度)为30px,标准宽度加倍.

宽图像: widecharacters

带标识的标准徽标: 标准

以下是徽标的当前格式:

.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;

}
Run Code Online (Sandbox Code Playgroud)

Aus*_*ins 34

你在寻找什么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);
Run Code Online (Sandbox Code Playgroud)

您必须为所有浏览器指定它,至少目前是这样.

编辑:

我忘了链接我的jsfiddle.

  • 非常好!让我吻你! (2认同)