符号宽度和高度

Question

如何设置符号宽度和高度？

<span>&gt;</span>

>不够宽：

span {
    font-family:arial;
    font-size:20px;
}

是否可以使用width: 10px; height: 20px;等代码进行设置？

Answer 1

将font-size设置为20px，然后使用transform属性，使用scale(.5, 1)将水平刻度减半并保持垂直刻度。

span {
  font-size:20px;
  transform: scale(.5, 1);
}

或查看fiddle。

Answer 2

>是一个角色。您可以使用font-size和font-stretch调整其大小（尽管has limited support）。

请记住，宽度也会因字体系列而异。

（当你真正想要一支箭时，小心不要使用大于号的符号。）

Answer 3

不，你不能分别改变宽度和高度，这是有充分理由的。字体（也包括符号）不会被拉伸。这样做你最终会看到扭曲和丑陋的符号，并让所有排版专家大吼大叫。 这就是为什么你只能设置一个值的原因 - 宽高比始终保持不变。这对我们所有人都很安全。

Answer 4

无法设置角色的宽度，但是......

一个小邋solution的解决方案：为什么你不尝试其他字体？您可以在Google Fonts（＆＃34;宽＆＃34;过滤器）中找到几种宽字体，并制作如下内容：

span.wide {
    font-family:"wide font";
    font-size:20px;
}

优点：跨浏览器，最少代码，无图像。
缺点：使用多种字体会降低您的网页速度。

Answer 5

使用css生成的内容来复制符号并将它们放置在内容的中心位置......实际上，您可以通过各种方式使用生成的内容来实现所需的解决方案，我只是选择了这个来制作我的点。只需使用unicode字符重新应用大于号，然后将它们移动到所需的大小，就像这样

  
span{width:75px; height:75px; text-align:left; font-size:75px; position:relative}
span:before,span:after{color:#008000; font-size:75px; font-weight:900; text-shadow:1px 1px 2px #000; position:absolute; width:75px; height:75px; top:0; z-index:100}
span:before{content:"\003C"; left:-3px}
span:after{content:"\003C"; right:-3px}  

使用问题中显示的相同标记;工作演示：http://jsfiddle.net/jalbertbowdenii/khAr3/1/