文本字形剪辑角度材料字体覆盖答案

【问题标题】：text glyph clip angular material font override文本字形剪辑角度材料字体覆盖
【发布时间】：2018-02-20 21:24:16
【问题描述】：

我遇到了文本字形在角度材料输入标签中被剪裁的问题。我有一个自定义字体覆盖发生，这似乎是问题的根源（如果我将字体设置回机器人字体不再剪辑）。

$custom-typography: mat-typography-config( $font-family: 'Open Sans, sans-serif' );

对于上下文，它也在输入文本字段中进行了剪辑，但我能够通过以下规则解决这个问题：

input.mat-input-element { height:100%; }

有人遇到过这个问题吗？

【问题讨论】：

尝试在此处复制此内容：github.com/winkerVSbecks/angular-material-custom-font-test 我没有看到任何剪辑。我什至添加了 tachyons，期望它可能与材质 CSS 冲突。您是否可能有其他 CSS 可以做到这一点？另外，你从哪里加载字体？字体文件会损坏吗？你试过其他字体吗？
@winkerVSbecks 哇，感谢您进行测试回购！该字体来自谷歌字体。我已经尝试链接和导入 Open Sans 并且两者都发生了剪辑。但是当我切换到“Lato”时，剪辑就消失了！不知道是不是文件损坏了？
@winkerVSbecks 我也确实通过将标签更改为具有 j 和 g 来重现您的示例中的问题，并且它们现在剪辑 ???? <mat-form-field> <mat-select placeholder="groovy jazz"> // </mat-select> </mat-form-field>
好的，太棒了。这给了我更多的调试信息。

【解决方案1】：

这似乎是 Open Sans 本身的问题，请参阅：https://codepen.io/winkerVSbecks/pen/jZKbze

font-family: "Open Sans", sans-serif;
height: 18px;
font-size: 16px;   
padding: 0;

当输入的填充为 0 并且高度和字体大小之间的差异小于 4px 时，它似乎会剪切文本。我不知道为什么会这样，但至少我们知道这不是由 ng-material 引起的问题。

【讨论】：

好的，感谢您证实我的怀疑！在这一点上，我将使用不同的字体。即使我设法破解这个特定问题的一些解决方案，我也不希望客户有未来的问题，因为它已经在 2 个实例中出现了问题。谢谢你！

【解决方案2】：

我在 Google 的 Google 字体团队工作，我已将其提交至 https://github.com/google/fonts/issues/1457 以跟踪其解决方案

【讨论】：