Question

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

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

以下是代码：

#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

图标在实际字体中偏移。考虑到他们本质上是＆＃39; text＆＃39;在这方面，您可以通过使用line-height属性来抵消它们。

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

这是展示这一点的最小例子：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

但是，您可能会发现将height更改为1em会更有利，这样可以让卡片的边框完全包含在内。在这种情况下，您需要为0.875em寻找line-height。

这是展示这一点的最小例子：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

希望这有帮助！：）

使用html5 / css

1 个答案: