chrome 不尊重字体系列（'PT Sans'）答案

【问题标题】：chrome does not respect font-family ('PT Sans')chrome 不尊重字体系列（'PT Sans'）
【发布时间】：2016-10-16 10:56:56
【问题描述】：

我有一个用HTML 编写的网页，其中我有一个button。除我的按钮外，所有页面都尊重font-family: 'PT Sans', sans-serif。

body {
  font-family: 'PT Sans', sans-serif;
  margin: 0px 0px 0px 0px;
}

这是表格内的按钮元素：

<button id="createCampaignButton" class="yellowButton" nowrap>CREATE NEW CAMPAIGN</button>

我也使用了<style>标签，如下所示，它会改变字体颜色但不会改变字体系列。

button {
          font-family: 'PT Sans', sans-serif;
          color: red
       }

我在这里搜索过，但没有一个对我有用。

我的样式表：

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

.yellowButton {
border: 0 solid #FFCC00;
width:100%;
/*height: 50px;*/
font-size: 16px; 
font-weight: bold;
background-color: #FFCC00; 
padding: 12px 20px;
box-shadow: 0 2px 2px 0 #C2C2C2;
border-radius: 2px;
outline:none;
}
.yellowButton:active {
  border: 0 solid #FFCC00;
  width:100%;
  /*height: 50px;*/
  font-size: 16px; 
  font-weight: bold;
  background-color: #FFCC00; 
  padding: 12px 20px;
  box-shadow: 0 0 0 0 #C2C2C2;
  border-radius: 2px;
  outline: none;
}

更新现在我注意到问题仅在于 'PT Sans' 字体！所有其他字体都可以正常工作。

【问题讨论】：

你能分享你的整个样式表吗？查看是否有任何规则覆盖了您的身体样式将很有用。
@Brayniverse 我添加了相关样式
很奇怪。可以给个链接看看吗？

标签： html css google-chrome fonts styles

【解决方案1】：

你是否包含了这个文件？？

<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

如果不只是过去在标题中。

或者如果你想在 css 中，使用这个

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

【讨论】：

尝试使用" font-family: 'PT Sans', sans-serif !important; "

【解决方案2】：

您可以在 chrome 中使用右键单击和“检查”来查看正在使用的样式以及覆盖其他样式。

如果您检查该元素，您将看到覆盖了什么以及拼写错误的内容，旁边有一个黄色的小警告图标。

【讨论】：

OP 在按钮中明确使用font-family，这不是问题
这是真的，我的错，对不起。阅读速度快。然后我只能想到使用引导程序或其他覆盖样式的东西。但我相信检查会有所帮助。
是的，你是对的。肯定检查代码发现了一些继承的样式

【解决方案3】：

问题已解决，将这一行添加到样式中，据我了解，table 内的button 不会从body 样式继承样式。主要问题是我应该清理浏览器的缓存。

button{
        font-family:  'PT Sans', sans-serif;
      }

【讨论】：