用css设置字符宽度 [英] setting character width with css

问题描述

我需要用css设计一个简单的标志，一切都很好，除了字母大小。要求是使用verdana字体，但使用宽字符，如图所示。然而，使用当前的代码，他们看起来很狭窄。有没有反正要实现这个行为，而不使用图像？

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?

我不是寻找字母间距，而是如何使字符本身占据设置的像素数。例如，我想要信 t 具有30px的字体大小（高度），并加倍标准宽度。

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 t to have 30px font size (height) and double the standard width..

宽图片：

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;

}

推荐答案

're寻找 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.

我忘记连结 my jsfiddle 。

这篇关于用css设置字符宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！