html - 一行代码中不同大小的字体

Question

我很难解释这个问题，但我添加了一个截图。这个问题不在博客上的任何帖子中。

当我意识到这个问题时，只有 7 个帖子，这是第 5 个帖子。所以它不是第一个，也不是最后一个，也不是 X 帖子(也许我应该创建 10 个，看看它是否再次出现？)。

我通过“Inspect Element”对帖子本身、显示的源代码和控制 css 中的 HTML 代码进行了三重检查，一切都很干净，没有几十个 <span>或诸如此类的标签，这些标签可能会扰乱此特定帖子的显示。

我已经删除了所有带删除线的 CSS 代码，据我所知，这意味着它不是事件的并且无论如何都将被忽略:

.coller .out-thumb .entry-excerpt {
    font-size: 16px;
    line-height: 24px;
    color: #3e3e3e;
    padding-left: 3px;
    display: inline-block;
    padding-top: 5px;}

.grid .out-thumb .entry-excerpt {
    font-weight: 400;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-style: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;}

* {
    box-sizing: border-box;}

body {
    font-family: "Lato", sans-serif;
    word-wrap: break-word;}

你们知道是什么原因造成的吗？我不知道我现在检查代码的频率是多少，但我真的找不到任何东西。

Answer 1

问题是文本使用的字符类似于 a、e 和 o，但不是普通的拉丁字符 a、e 和 o 字符。相反，它们在西里尔字母范围内。

该页面使用的是 Lato font-family，而该 font-family 的版本似乎缺少 'а' (а ;)、'е' (е) 和 'о' (о) 字符。我不确定 Lato 的扩展拉丁语版本是否支持它们。

无论如何，因为加载的 Lato 版本不包含这些字符的字形，浏览器会回退到下一个字体系列，它被设置为 sans-serif，这就是为什么那些字形以错误的大小出现。

一种解决方案可能是将使用的字符替换为常规拉丁字符，但是，如果您依靠其他人进行内容输入，那么当他们从键盘上键入这些字符时，问题可能会再次出现。

如果字符在 Lato 的扩展拉丁版本中可用，请确保加载更具包容性的字体应该可以解决问题。

如果 Lato 不为这些字符提供字形，您可能需要创建一个包含必要字符的自定义字体以用作后备。创建自定义字体对于这个特定问题来说太宽泛了，所以我将把它作为练习留给读者。