时间戳

首页 > 解决方案 > 字体 IranSansX 在 chrome 中无法正常工作

css - 字体 IranSansX 在 chrome 中无法正常工作

问题描述

我正在使用一种名为的字体IranSansX，它是一种流行的波斯字体。默认情况下，Firefox 浏览器中的字体渲染是完全正确的。但是当我用谷歌浏览器打开网站时，它出现了一些问题。

火狐

火狐浏览器中的字体

铬合金

谷歌浏览器中的坏字体

代码

我使用 vue.js 作为前端，使用 Vuetify 作为前端框架。我没有编写任何自定义 css，一切都是框架的默认值。

它只有在<ul><li></li></ul>标签内时才会中断。这些屏幕截图是作为导航栏菜单的无序列表中的标签

标签： cssgoogle-chromefonts

解决方案

我发现li标签是display: inline哪个 IDK 这如何导致错误。但是当我将display属性更改inline-block为问题不存在并且字体正确呈现时。

越野车 CSS
ul.nav{
  list-style: none;
  li{
    display: inline;
    a{
      text-decoration: none;
      color: #fefefe;
      padding: 10px;
      font-size: .8rem;
    }
  }
}
固定版本
ul.nav{
  list-style: none;
  li{
    display: inline-block;
    a{
      text-decoration: none;
      color: #fefefe;
      padding: 10px;
      font-size: .8rem;
    }
  }
}

如果有人找到发生这种情况的真正原因，请发表评论！

推荐阅读