CSS - 为编码字形设置样式

Question

我需要一个带有加号（+）标题的标题，用于客户端站点。它需要看起来像这样 -

我正在使用html代码进行字形 - +。我已将它放在span标记内的h1标记内，如下所示 -

span {
  /* content: "\002B"; */
  padding-right: 25px;
  height: 75px;
  color: #4b0082;
}

<h1><span>&#43;</span>What we do</h1>

我可以应用颜色和填充样式，但不能应用大小。它需要更大，如上例所示。我的标题位于大容器div的顶部。如何将尺寸规则应用于加号（+）？

Answer 1

添加字体大小有望解决您的问题。看看你当前的例子我可以看到你已经知道如何正确对齐它。

span {
  /* content: "\002B"; */
  padding-right: 25px;
  height: 75px;
  color: #4b0082;
  font-size: 55px;
}

<h1><span>&#43;</span>What we do</h1>

Answer 2

首先，为span规则添加字体大小。然后，要正确对齐，您可以添加position: relative和否定bottom设置：

span {
  /* content: "\002B"; */
  padding-right: 25px;
  height: 75px;
  color: #4b0082;
  font-size: 54px;
  bottom: -4px;
  position: relative;
}

<h1><span>&#43;</span>What we do</h1>

Answer 3

将<{1}}和font-weight添加到字形范围

font-size

span {
  /* content: "\002B"; */
  color: #4b0082;
  font-weight:700;
  font-size:2em;
  vertical-align:sub;
}

Answer 4

而不是将＆amp;＃43放在标记中，我建议该符号纯粹是装饰性的，并不需要成为DOM的一部分，并且更适合放置在伪中元件。

＆＃13;

＆＃13;

   h1 {
   position:relative;
   padding-left:1.5em;
   
   }
   h1:before {
    content: "\002B";
    color: #4b0082;
    font-weight: 700;
    font-size: 2em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-55%);
   
    }

＆＃13;

 <h1>What We Do</h1>

＆＃13;

＆＃13;

＆＃13;

使用ems调整字形大小意味着您可以根据其上下文更改H1的大小。

Answer 5

我用＆amp;＃x2795; （http://www.fileformat.info/info/unicode/char/2795/index.htm）用于加重unicode标志。

标志大小为标题字体大小。如果h1字体大小改变，符号大小也会响应。

请查看代码段中的css。

span {
  padding-right: .3em;
  color: #4b0082;
  vertical-align: middle;
  font-size: 1.2em;
}

<h1><span>&#x2795;</span>What we do</h1>