enter image description here enter image description here

我原以为这个问题与line-heightpaddingmarginsdisplay等有关.我原以为可能与父元素有关,但结果是字体创造了空间!

有没有办法移走或调整这个空间?

不过,我真正想做的是让它垂直居中.正如你在第一张图片中看到的,它没有垂直地居中对齐.

我在这里创建了一个Codesen:https://codepen.io/kanekekoa/pen/GRPeBXz

:root {
  --accent: #db1959;
  --accent-2: #8eb2a6;
  --accent-4: #f4fbfe;
  --accent-5: rgba(210, 215, 198, 0.2);
  --hb-pink: #db1959;
}

body {
  background-color: var(--hb-pink);
}

a {
  text-transform: none;
  font-size: 18px;
  line-height: 1.5;
  word-wrap: break-word;
  box-sizing: inherit;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border-radius: 15px;
  display: inline-flex;
  font-weight: 700;
  transition: all 0.5s ease;
  background-color: var(--accent-4);
  color: var(--accent);
}

#fancy-font {
  font-family: Noto Sans Javanese, sans-serif;
}
<a id="fancy-font" href="#">Give us a shout!</a>

<a id="simple-font" href="#">Give us a shout!</a>

推荐答案

Tl;Dr. Select 不包含非拉丁字符的字体

您 Select 的"Noto SansJava 字体"是专门为Java 字符集制作的,它的行高比典型的拉丁字符要高得多.

Noto Sans Javanese paragraph example

也就是说,当与拉丁字符一起使用时-或者如果仅用于拉丁字符集-非Java 字母可能看起来像是从顶部摇晃.

inline text example

in-paragraph example

Noto Sans实际上是为支持多种语言的脚本而设计的.除非您专门针对一种特定的语言(在本例中是Java 语),否则您可能不需要特定的变体.使用通用Noto SAN可能就足够了,并且可能会解决您的基线对齐问题.

Html相关问答推荐

悬停时放大人物:不要增加其周围边界的大小

R中的动态Webscraping

有没有可能设置div的边框宽度相对于其父宽度和高度?'

创建具有圆锥渐变的水平CSS聚光灯

悬停效果在新西兰表上不起作用

如何突破安莉得分

从网页中提取URL

使用CSS Flexbox时,我的图像未对齐

使用CSS和Slick Carcass使图像适合屏幕

为什么 Select 元素在带有数据绑定的Blazor上行为怪异?

如何使活动选项卡背景作为父背景图像

如何在Go模板中传入途中创建的 map

复制两个

会产生一个空行;复制

元素不会

即使必填字段为空,HTML 表单也已成功提交

如何使用html css将图像显示为附加形状

pandas `to_html()` - 如何只使特定的行有边框

如何将某些 div 的高度限制为具有 display flex 行的同一父 div 中的其他 div?

删除按钮组件时 bootstrap col-auto 布局高度对齐中断

项目的水平列表:倒数第二个项目居中,而最后一个项目占据所有剩余空间

如何使文本显示在页眉/页脚之外?