css - 在不同的页面中具有不同的字体粗细/类型

标签 css fonts

我的子站点有问题。我已经调整了网站上的大部分内容,但后来我意识到页面之间的字体系列和粗细是不同的。目前,我正在通过一个 css 插件覆盖 CSS,在遇到这个问题之前一切顺利。

这是字体的CSS代码;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
*{font-family:"Open Sans" !important;
  font-weight: 100;
  color: rgba(0, 0, 0, 0.50);
  font-size: 18px;

}

p{
color:  rgba(0, 0, 0, 0.50) !important;
   font-weight: 100 !important;
}

strong{
color: #1a9396 !important;
font-weight: 300 !important;
}

h1, h2, h3, h4, h5{
color: #1a9396 !important;
font-weight: 100 !important;
} 

最佳答案

问题是您的 Revslider 之一在您的 CSS 文件加载后加载 http://fonts.googleapis.com/css?family=Open+Sans:300%2C400。这会导致所有带有 font-weight: 100; 的字体呈现为 Open Sans Light。罪魁祸首是标题下方的 slider 。这发生在所有使用 revslider 的页面上。

如果您希望字体使用Open Sans Light,请尝试删除您的@import url(http://fonts.googleapis.com/css?family=Open+Sans) ; 或将其更改为 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);

如果您想要正常的字体粗细,请尝试将您的 font-weight 设置回 400 问题已解决。

我不熟悉 Revslider,但看起来您可以从 Revslider 设置中停止加载 Open Sans 字体。以下是相关说明的链接:https://www.themepunch.com/revslider-doc/google-fonts/

关于css - 在不同的页面中具有不同的字体粗细/类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45280081/

相关文章:

css - Century Gothic 字体可用性问题

css - float 包装 "too late"

javascript - 如何将 document.getElementById ("myNumber"的值存储在变量中并添加 if-else 语句

html - 使用 Bootstrap 响应方案的框之间的间距

跨平台安全使用的 SVG 字体

html - 灰色字体彩印

css - 如何在屏幕尺寸更改时阻止图像缩放

javascript - 将一个 div 在另一个具有绝对位置状态的 div 内水平居中

Android:找出哪个字体文件适合我要显示的字符

ios - UITableViewCell 更改删除行按钮的字体