使用特定字体设置样式时，无法单击React-router Link

Question

因此，使用字体为第二个li设置样式会使其外观正确，但会阻止Link创建我可以点击的链接。

renderLinks(){
     if (this.props.authenticated) {
          return [
              <li key="1" className="user-info" >
                  {this.props.email}
              </li>,
              <li key="2" className="sign-out">
                  <Link to="signout">Sign Out</Link>
              </li>
          ]
        } else {
            return [
                ...
            ]
    }
}

和我的CSS ...

.sign-out {
    text-decoration: none;
    //font: 10pt 'KnockoutHTF34JuniorSumo';
}

如果我注释掉字体规则，就像上面一样，我得到了一个有效的Link。但是，如果我使用该字体，我无法单击该链接（即使锚标记似乎存在于DOM中）

发生了什么事？

即使内联样式也会破坏Link