7

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

<span>&gt;</span>

>不够宽：

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

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

4

5 回答 5

14

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

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

或看小提琴。

正常，拉伸

于 2013-06-26T09:13:34.297 回答
7

>是一个字符。您可以使用font-size和font-stretch调整其大小（尽管它的支持有限）。

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

（当您真正需要箭头时，请注意不要使用大于符号。）

于 2013-06-26T08:32:59.767 回答
2

无法设置字符的宽度，但是...

一个有点草率的解决方案：为什么不尝试使用其他字体？您可以在Google 字体中找到几种宽字体（在“宽”过滤器下），并制作如下内容：

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

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

于 2013-06-26T09:10:31.643 回答
2

不，您不能单独更改宽度和高度，这是有充分理由的。字体（这也包括符号）不会被拉伸。这样做你最终会得到扭曲和丑陋的符号，让所有的排版专家大喊大叫。这就是您只能设置一个值的原因 - 纵横比将始终保持不变。这是为了我们所有人的安全。

于 2013-06-26T08:46:41.350 回答
-4

使用 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/

于 2013-06-26T08:33:37.637 回答