鼠标悬停字体抖动
Have you ever tried to change the value of the font-weight property on link states? If yes, you may have noticed that the text shifts.
您是否曾经尝试在链接状态上更改font-weight属性的值？ 如果是，您可能已经注意到文本移动了。
In this quick tip, we’ll first learn what causes this undesired behavior and then we’ll examine two possible solutions.
在此快速提示中，我们将首先了解导致这种不良行为的原因，然后研究两种可能的解决方案。
As a first step, let’s identify the problem by looking at a simple example. Consider the following visualization:
首先，让我们看一个简单的例子来确定问题所在。 考虑以下可视化：
The items are links, so in your CSS you might try something like this:
这些项目是链接，因此在CSS中，您可以尝试执行以下操作：
a:hover { font-weight: bold; }Because we usually don’t define a fixed width for items like this, when the user hovers over the links, the text shifts. Of course, this happens because the width of each link gets bigger on hover. To test it, we assign the active class to the first link and add this CSS rule:
因为我们通常不为此类项目定义固定宽度，所以当用户将鼠标悬停在链接上时，文本会移动。 当然，发生这种情况是因为悬停时每个链接的宽度都会变大。 为了对其进行测试，我们将active类分配给第一个链接并添加以下CSS规则：
.active { font-weight: bold; }Lastly, we change the text of the second link to be equal to the first one, like so:
最后，我们将第二个链接的文本更改为等于第一个链接的文本，如下所示：
Now, if we open the browser console and target the first two links, we’ll notice that their computed width is different.
现在，如果打开浏览器控制台并定位前两个链接，我们将注意到它们的计算宽度是不同的。
You can see what we’ve discussed above in the following CodePen demo:
您可以在下面的CodePen演示中看到我们上面讨论的内容：
See the Pen Using the font-weight Property on Hover States by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )在悬停状态时使用font-weight属性的 钢笔 。
Admittedly, it’s not very common to add a bold effect to a hover state, but it may come up at some point. So let’s look at two possible solutions to get around this problem.
诚然，在悬停状态上添加大胆的效果不是很常见，但有时可能会出现。 因此，让我们看一下解决这个问题的两种可能的解决方案。
As mentioned, perhaps the most obvious solution is to give all list items a width. So, in our example, we set the width of each list item to 24%.
如前所述，也许最明显的解决方案是给所有列表项指定宽度。 因此，在我们的示例中，我们将每个列表项的宽度设置为24% 。
Here’s the result:
结果如下：
See the Pen Fixing font-weight hover states using defined widths by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上SitePoint ( @SitePoint ) 使用定义的宽度使用 Pen Fixing字体粗细悬停状态 。
Even though the solution above works, it’s might not ideal because there are cases when we might want to avoid adding a fixed width to our elements. With that in mind, let’s discuss a better solution.
即使上述解决方案可行，也可能并不理想，因为在某些情况下，我们可能希望避免为元素添加固定宽度。 考虑到这一点，让我们讨论一个更好的解决方案。
By taking advantage of the text-shadow property, we’re able to somehow simulate the font-weight behavior. We do this by playing with the blur-radius value so as to adjust the shadow according to our needs.
通过利用text-shadow属性，我们可以以某种方式模拟font-weight行为。 我们通过使用blur-radius值来执行此操作，以便根据需要调整阴影。
Depending on the fonts used in our projects, we can combine the text-shadow property along with the letter-spacing property to create some nice text effects.
根据项目中使用的字体，我们可以结合使用text-shadow属性和letter-spacing属性来创建一些不错的文本效果。
To demonstrate this behavior, we assign a few additional lines of CSS to our links:
为了演示此行为，我们为链接分配了几行CSS：
a { letter-spacing: .1em; transition: text-shadow .3s; } a:hover { text-shadow: 0 0 .65px #333, 0 0 .65px #333; /* use the line below if you want a more intense effect */ /* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */ }Here’s the demo:
这是演示：
See the Pen Fixing font-weight hover states with Text Shadow by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上带有Site Shadow ( @SitePoint )的“ 文本阴影”的Pen Fix 字体粗细悬停状态 。
So we avoid the problem of the items moving, and we don’t require adding any kind of widths to the elements. And as you can see, this solution is much nicer than using font-weight because the size of the text isn’t changing at all. So it’s a much cleaner look.
因此，我们避免了项目移动的问题，并且我们不需要为元素添加任何宽度。 如您所见，此解决方案比使用font-weight更好，因为文本的大小完全没有变化。 因此，它看起来更干净。
If I needed to solve this problem, I’d likely use one of the two solutions I just described. Do you know of another way to fix this? Let us know in the comments.
如果需要解决此问题，则可能会使用上述两种解决方案之一。 您知道解决此问题的另一种方法吗？ 让我们在评论中知道。
翻译自: https://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/
鼠标悬停字体抖动
相关资源：jdk-8u281-windows-x64.exe