对齐中心垂直，与谷歌字体一起工作

Question

我一直在搜索如何对齐中心verticaly，我找到了这个答案：
How do I vertically center text with CSS?

所以我尝试在我的网站上做到这一点，但它没有工作
之所以不工作，是因为我在检查器中取消它时使用谷歌字体，文本与中间对齐，
我的文字在表格单元格中，我给了它：

vertical-align:middle;

我也试图用line-height来实现，但结果相同 文字显示在顶部

在jsfiddle中使用谷歌字体，例如：https://jsfiddle.net/e6732sq8/
但在我的网站上，我的网站：http://codepen.io/anon/pen/qRVJrq（抱歉没有上传到jsfiddle，其工作正常）

如果我明白我的意思是表格中的灰色文字

Answer 1

设置：

td{
display:flex;
align-items: center;
}

Answer 2

此问题 可能是由字体中的非拉丁字符引起的。

尝试将其添加到您的@ font-face声明中：

@font-face {
    /* latin */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

如果您自己托管字体，还可以通过Font Squirrel's Webfont Generator运行源字体文件（例如ttf），然后选择仅拉丁文的子集，这也将带来较小字体文件的好处。