使用 html5/css 堆叠字体符号并对齐字体周围的空格

Question

我正在尝试在固定位置插入一个符号，然后使用 font-symbols 在其上堆叠另一个符号。但是字体周围的间距阻止我这样做。（注意符号来自 unicode-font）

到目前为止，我已经尝试调整 z-index 和行高，这使我能够调整元素和字体占用的总 space 的高度，但它们仍然未对齐。我试过调整定位或垂直对齐。可以对字体本身进行哪些其他对齐修改？

代码如下：

#back
{
font-size: 15em;
font-weight:100;
line-height:1.15em;
height:0.9em;
padding: 0;
margin: 0;
border: 1px solid black;
vertical-align: bottom;  
 z-index:300; 
 position:fixed; 
 top:155px; 
 background-color:white;
 }

#front {
font-size: 15em;
font-weight:100;
line-height:1.15em;
height:0.9em;
padding: 0;
margin: 0;
border: 1px solid black;
vertical-align: bottom;
 z-index:1000; 
 position:fixed; 
 top:165px;
 left:30px; 
 background-color:white;
 }

https://jsfiddle.net/gns07zax/

Answer 1

图标在实际字体中有偏移。考虑到它们在这方面本质上是 'text'，您可以通过使用 line-height 属性.

来抵消它们

请注意，您的代码段中有许多不正确的选择器，例如 ID 选择器中遗漏了 hastag。但是，我假设您正在尝试将卡片与其框对齐，并且您正在寻找大约 186px.

的值

这是一个展示此内容的最小示例：

* {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

h1 {
  font-size: 15em;
  font-weight: 100;
  line-height: 1.15em;
  height: 0.9em;
  padding: 0;
  margin: 0;
  border: 1px solid black;
  vertical-align: bottom;
}

#back {
  position: fixed;
  background-color: white;
}

#front {
  position: fixed;
  left: 180px;
  background-color: white;
}

#back, #front {
  line-height: 186px;
}

<h1 id='back'>&#127137</h1>
<h1 id='front'>&#x1F0A1</h1>

您可能需要更改定位以适应。

但是，您可能会发现将 height 更改为 1em 更有益，这将使卡片完全包含在它们的边框中。在这种情况下，您要查找 0.875em 以获得 line-height.

这是一个展示此内容的最小示例：

* {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

h1 {
  font-size: 15em;
  font-weight: 100;
  line-height: 1.15em;
  height: 1em;
  padding: 0;
  margin: 0;
  border: 1px solid black;
  vertical-align: bottom;
}

#back {
  position: absolute;
  background-color: white;
}

#front {
  position: absolute;
  left: 180px;
  background-color: white;
}

#back, #front {
  line-height: 0.875em;
}

<h1 id='back'>&#127137</h1>
<h1 id='front'>&#x1F0A1</h1>

希望对您有所帮助！ :)

使用 html5/css 堆叠字体符号并对齐字体周围的空格

Stacking font symbols and aligning the spaces around a font using html5/css

html

css

unicode

fonts

text-alignment