CSS-樣式化編碼字形

Question

對於客戶站點，我需要在其旁邊帶有加號（+）的標題。 它需要看起來像這樣-

我正在將html代碼用於字形- + 。 我將其放置在像這樣的h1標簽內的span標簽內-

 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

在字形范圍中添加font-weight和font-size

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

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

Answer 4

相反，建議在標記中放置＆＃43，該符號純粹是裝飾性的，不需要成為DOM的一部分，更適合放置在偽元素中。

  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%); } 

  <h1>What We Do</h1> 

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

Answer 5

我使用＆＃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>