浏览网站时字体粗细变化答案

【问题标题】：Font weight changing while navigating website浏览网站时字体粗细变化
【发布时间】：2021-05-14 08:56:15
【问题描述】：

我注意到很多这样的问题，但我也注意到其中大多数都没有明确的答案。我的问题是我的应用导航栏上的字体粗细在我导航时不断变化。这是前后两张照片：

这就是它应该的样子（有点）。当我单击导航栏中的链接时，它看起来像这样。 Pic1

这是当我在导航栏外单击时： Pic2

您可以看到字体粗细下降到看似 100 的程度。这是我尝试过的：

在我的 html 文件中从 Google Fonts 导入 Lato 并包含所有权重，但语义 UI CSS 仍将其取消。
我尝试添加更多 CSS 以直接覆盖其他 CSS（您可以通过检查标题'JOBTME'。当我删除我添加的最后一个类时，实际上会更好。其他覆盖尝试不断被语义 Ui 覆盖。
尝试删除我的 css 块以查看它是否会影响问题，但没有成功。

我的 Index.js 之后有样式加载：

import React from 'react';
import ReactDOM from 'react-dom';

import 'semantic-ui-css/semantic.min.css';
import './styles.css';
(...)

我的目标是有一个稳定的字体粗细。好的，如果有人有任何解决方案，我将不胜感激。

编辑：显然问题出在本地，因为我只使用一个浏览器来查看网站（Edge）。尽管在 Chrome 中问题仍然存在，但在使用 Firefox 时并不明显。我切换到 macbook 并使用了 safari，我也没有发现任何问题。总而言之，问题似乎出在我的本地 edge/chrome 浏览器上。

谢谢，

罗宾逊

【问题讨论】：

老实说，我看不出有什么不同。使用 Mac Firefox 登录，并检查了指向员工的 .item 元素，它永远不会改变我对它所做的任何事情。拉托，14 像素，500 字体粗细。我什至尝试减慢网络速度，但它看起来仍然不错。
我也在 Chrome 中尝试过。没有明显变化。 500 字体粗细。你有一个 0.9 的不透明度作为字体颜色，所以当你将鼠标悬停在它上面时，它看起来就像文本亮起一样。
真的吗？那么问题可能是本地的？您在我的屏幕截图中看到了我如何看待它们的变化。好吧，如果其他人没有看到问题，那么我想我会很高兴。感谢您抽出宝贵时间 Rickard，非常感谢。

标签： css

【解决方案1】：

在使用锚标签的菜单中经常发生的一件事是伪类被设置为不同的字体样式。具有字体大小继承的锚上的伪类从持有锚的父级获取它们的字体大小，而不是锚本身。此外，与锚元素不同的是，锚上的伪类在 CSS 中与普通类具有相同的选择性权重，因此在触发它们时可以轻松地层叠元素样式，甚至是它们的类。如果他们有不同的字体大小，那就很明显了。因此，如果您发现问题，请确保在导航上分配一致的样式，如下所示：

a.mylink,
a.mylink:link,
a.mylink:visited,
a.mylink:hover,
a.mylink:focus,
a.mylink:active
 {
    font-size: 1rem;
}

【讨论】：