Html 将字体粗细更改为粗体会无意中改变元素的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17650360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change of font-weight to bold is unwantingly changing width of element
提问by Banny
Whilst creating a navigation bar for my site I decided to make the active page tab show up in bold for usability purposes, but when I change the font-weighton the element it only slightly makes the element wider, an example I made using hover effects instead demonstrates my issue and i've never known a way to solve it..
在为我的网站创建导航栏时，为了可用性目的，我决定将活动页面选项卡以粗体显示，但是当我更改font-weight元素上的 时，它只会稍微使元素变宽，我使用悬停效果制作的示例演示了我的问题，我从来不知道解决它的方法..
HTML
HTML
<ul id="mainNav">
<li class="navItem">
<a class="navLink" id="activeLink">Link 1</a>
</li>
<li class="navItem">
<a class="navLink">Link 2</a>
</li>
<li class="navItem">
<a class="navLink">Link 3</a>
</li>
</ul>
CSS
CSS
* {
font-family: Arial;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
#mainNav {
background: RGB(200, 230, 240);
border-bottom: 1px solid RGB(0, 0, 0);
height: 30px;
margin: 0 auto;
position: relative;
width: 100%;
}
.navItem {
display: block;
float: left;
position: relative;
}
.navItem:last-child .navLink {
border-right: 1px solid RGB(0, 0, 0);
}
.navLink {
border-bottom: 1px solid RGB(0, 0, 0);
border-left: 1px solid RGB(0, 0, 0);
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 15px;
white-space: nowrap;
}
.navItem:hover .navLink {
background: RGB(120, 200, 250);
color: RGB(255, 255, 255);
cursor: pointer;
font-weight: bold;
}
#activeLink {
background: RGB(90, 170, 220);
color: RGB(255, 255, 255);
font-weight: bold;
}
#activeLink:hover {
background: RGB(110, 190, 240);
}
.navItem:hover .subNav {
display: block;
}
采纳答案by Pebbl
Other than the widthroute here are two other possibilities, it's down to personal preference as to whether you think they are suitable or not. Both these ideas work on the same principal, that you use a separate element to show the bold state, and this element either doesn't (idea one) or does (idea two) affect the UI with it's dimensions.
除了width这里的路线还有另外两种可能性，你认为它们是否合适取决于个人喜好。这两个想法都基于相同的原则，即您使用单独的元素来显示粗体状态，并且该元素不会（想法一）或（想法二）影响 UI 及其尺寸。
Idea one
想法一
Use pseudo selectors. This method relies on the browser supporting quite recent advances i.e. :beforeand content: attr()so probably isn't reliable just yet.
使用伪选择器。这种方法依赖于支持最新进展的浏览器:before，content: attr()因此可能还不可靠。
- https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility
css:
css：
ul {
list-style: none;
}
ul li {
float: left;
}
ul li:hover a {
visibility: hidden;
}
ul li:hover:before {
position: absolute;
font-weight: bold;
content: attr('data-text');
}
markup:
标记：
<ul>
<li data-text="one"><a href="#">one</a></li>
<li data-text="two"><a href="#">two</a></li>
<li data-text="three"><a href="#">three</a></li>
</ul>
Idea two
想法二
The other is a bit more straight-forward, although it relies on preping your markup first — and those who use screen readers may understandably dislike your site; unless you can find a nice way to hide the duplicate text from them.
另一种更直接一些，尽管它依赖于首先准备您的标记 - 使用屏幕阅读器的人可能会不喜欢您的网站，这是可以理解的；除非你能找到一种很好的方法来隐藏重复的文本。
markup:
标记：
<ul>
<li><a href="#">
<span class="a">one</span>
<span class="b">one</span>
</a></li>
<li><a href="#">
<span class="a">two</span>
<span class="b">two</span>
</a></li>
<li><a href="#">
<span class="a">three</span>
<span class="b">three</span>
</a></li>
</ul>
css:
css：
ul {
margin: 0; padding: 0;
list-style: none;
}
ul li {
float: left;
}
ul li a span.b {
visibility: hidden;
font-weight: bold;
}
ul li a span.a {
position: absolute;
}
ul li:hover a span.b {
visibility: visible;
}
ul li:hover a span.a {
visibility: hidden;
}
At the end of the day the better solutions would be:
归根结底，更好的解决方案是：
- Set a width, although I can understand not wanting to do this.
- Use JavaScript to calculate dimensions.
- Choose a different highlight, one that doesn't alter the dimensions of the text.
- 设置宽度，虽然我可以理解不想这样做。
- 使用 JavaScript 计算尺寸。
- 选择一个不同的突出显示，它不会改变文本的尺寸。
回答by Nate Bunney
The way I handle this is to use JQuery to 'fix' the width so that it does not change on hover even though the bold does change. This basically takes the css width answer here and automates the process.
我处理这个问题的方法是使用 JQuery 来“修复”宽度，这样即使粗体确实发生了变化，悬停时它也不会改变。这基本上采用这里的 css 宽度答案并自动化该过程。
(function($) {
$(function() {
$('#menu > li').each(function(){
wid = $(this).width();
$(this).css('width', wid+'px');
});
});
})(jQuery);
回答by Cowdozer
An alternative to font-weightfor bolding text is to use text-shadowto set a horizontal shadow the same colour as the text. This code sets equal shadows to the left and the right. With only one shadow, the text would appear to shift in the direction of the shadow.
font-weight加粗文本的替代方法是使用text-shadow与文本颜色相同的水平阴影。此代码在左侧和右侧设置相等的阴影。只有一个阴影，文本似乎会朝着阴影的方向移动。
CSS:
CSS：
a:hover {
text-shadow: .25px 0px .1px,
-.25px 0px .1px;
}
Note that web browsers do not render text, let alone text-shadoweffects, identically. You'll want to check how they look in multiple browsers before deciding on values.
请注意，Web 浏览器不会以相同的方式呈现文本，更不用说text-shadow效果了。在决定值之前，您需要检查它们在多个浏览器中的外观。
回答by niccol
Interesting that no-one mentions letter-spacing.
有趣的是没有人提到letter-spacing。
It is possible to add letter spacing to the normal font and remove it for the bold version.
可以为普通字体添加字母间距，并为粗体版本删除它。
Getting it right is not always possible and depends a lot on the font and the font-size. But with more browsers starting to accept subpixel values for letter-spacing it starts to be more practical.
正确处理并不总是可能的，这在很大程度上取决于字体和font-size. 但是随着越来越多的浏览器开始接受字母间距的子像素值，它开始变得更加实用。
Example:
例子：
.nav-link.active {
font-weight: bold;
/* Adjust for font-weight bold so that the text will still align */
letter-spacing: -1px;
}
回答by Kami
As you are not specifying any width for the elements, they are sized according to their content. As such, when the font-weightis normal, the element takes up less space than when it is bold. As the content changes size, the size of the box also changes.
由于您没有为元素指定任何宽度，因此它们会根据其内容调整大小。因此，当font-weightis 时normal，元素占用的空间比 is 时少bold。当内容改变大小时，框的大小也会改变。
You can specify the width of the element so that it slightly bigger than it's content or alternatively use a different method for identifying the currently active tab.
您可以指定元素的宽度，使其略大于其内容，或者使用不同的方法来标识当前活动的选项卡。
回答by Mihai Alex
I think there is no CSS based solution for this, unless you can add a width, maybe a different width to each li item. You already have a change in bg color on hover and selected states, I suggest you drop the font-weight change. Visually it's not a big change, and in terms of usability you already have the bg color change that I think is enough.
我认为没有基于 CSS 的解决方案，除非您可以为每个 li 项目添加宽度，也许是不同的宽度。您已经在悬停和选定状态下更改了背景颜色，我建议您放弃字体粗细更改。从视觉上看，这不是一个很大的变化，在可用性方面，你已经有了我认为足够的 bg 颜色变化。
回答by Praveen
回答by Khadim Ali
If you put the width attribute in your .navItem class, then the width wouldn't be changed on hovering.
如果将 width 属性放在 .navItem 类中，则悬停时宽度不会更改。
.navItem {
display: block;
float: left;
position: relative;
**width:70px;** // this
}
I have udpated the fiddle. Please check.
我已经更新了小提琴。请检查。
回答by AndrewT
Here how I have done it:
这是我如何做到的：
<ul id="header_menu">
<?php
$menu_items = array(array("Home", "/"),
array("About", "/about.html"),
array("Consumer Info", "consumer-info.html"),
array("News & Events", "news-events.html"),
array("Contact", "contact.html")
);
foreach($menu_items as $value)
{
// Find box width of text and add padding
$padding = 10;
$font-size = 12; // pt
list($left,, $right) = imageftbbox($font-size, 0, "fonts/OpenSans-Bold.ttf", $value[0]);
$width = ($right - $left) + ($padding * 2);
echo "<li><a style=\"width:" . ($width) . "px;\" href=\"" . $value[1] . "\">" . $value[0] . "</a></li>";
}
?>
</ul>
