CSS：在不更改容器大小的情况下粗体显示一些文本
我有一个水平的导航菜单，基本上只是一个<ul>的元素并排设置。 我没有定义宽度，而只是使用填充，因为我希望宽度由菜单项的宽度来定义。 我大胆select当前select的项目。
麻烦的是，在粗体中，单词变得稍宽一点，这导致其余的元素稍微向左或向右移动。 有没有一个聪明的方法来防止这种情况发生？ 告诉填充忽略由粗体造成的额外宽度的行吗？ 我的第一个想法是简单地从“活动”元素的填充中减去几个像素，但是这个数量是变化的。
如果可能的话，我想避免在每个条目上设置一个静态宽度，然后居中，而不是我现在使用的填充解决scheme，以便将来对条目进行简单的更改。
我有同样的问题，但得到了一个类似的影响，有点妥协，我用文字阴影代替。
li:hover {text-shadow:0px 0px 1px black;}
jsfiddle的例子
使用::之后的最佳工作解决scheme
HTML
<li title="EXAMPLE TEXT"> EXAMPLE TEXT </li>
CSS
li::after { display: block; content: attr(title); font-weight: bold; height: 1px; color: transparent; overflow: hidden; visibility: hidden; }
它添加了一个带有title属性的粗体文本宽度的不可见伪元素。
text-shadow解决scheme在Mac上看起来不自然，并没有利用Mac上提供的所有文本渲染美容。:)
信用： https ： //stackoverflow.com/a/20249560/5061744
我发现大多数字体是相同的大小，当您调整字母间距1px。
a { letter-spacing: 1px; } a:hover { font-weight: bold; letter-spacing: 0px; }
虽然这确实改变了常规字体，所以每个字母都有一个额外的像素间距。 对于菜单标题是如此之短，它不会成为一个问题。
不幸的是，当文本为粗体时避免宽度变化的唯一方法是定义列表项的宽度，但正如你所说的那样手动操作是耗时且不可扩展的。
我能想到的唯一的事情就是使用一些javascript来计算标签的宽度，然后在粗体之前应用宽度，同时需要粗体（当您hover或单击时）。
这修改和显示使用Alexxali和我自己的调整Thorgeir的 答案的例子：
li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
这样可以在每个字母的两边使用黑体字（使用字体的颜色名称/代码代替black如果有必要的话）使用可以通过字体渲染正确缩放的单位。
警告：
px值支持十进制值，但当字体大小改变时（例如，用户使用Ctrl + +缩放视图），它们看起来不会太好。 改用相对值。这个答案使用
ex单位的分数，因为他们与字体缩放。
在〜大多数浏览器默认*中 ，期望8px，因此0.1px。
您甚至可以使用text-shadow属性比使用font-weight更准确地select不同的粗体font-weight 。 你自己看：
li { color: #000; } /* set text color just in case */ .tsbold0 { text-shadow: inherit; } .tsbold1 { text-shadow: -0.01ex 0 #000, 0.01ex 0 #000; } .tsbold2 { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; } .tsbold3 { text-shadow: -0.03ex 0 #000, 0.03ex 0 #000; } .tsbold4 { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; } .tsbold5 { text-shadow: -0.05ex 0 #000, 0.05ex 0 #000; } .tsbold6 { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; } .tsbold7 { text-shadow: -0.07ex 0 #000, 0.07ex 0 #000; } .tsbold8 { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; } .tsbold9 { text-shadow: -0.09ex 0 #000, 0.09ex 0 #000; } .bold { font-weight: bold; } .bolder { font-weight: bolder; } .ltrsp { letter-spacing:0; font-weight:bold; } /* via Matthew Foscarini */ li.ltrsp:hover { letter-spacing:0.0125ex; } li:hover { font-weight: normal!important; text-shadow: none!important; }
<li class="tsbold0">MmmIii123 This line tests tsbold0 (plain)</li> <li class="tsbold1">MmmIii123 This line tests tsbold1 (0.01ex)</li> <li class="tsbold2">MmmIii123 This line tests tsbold2 (0.02ex)</li> <li class="tsbold3">MmmIii123 This line tests tsbold3 (0.03ex)</li> <li class="tsbold4">MmmIii123 This line tests tsbold4 (0.04ex)</li> <li class="tsbold5">MmmIii123 This line tests tsbold5 (0.05ex)</li> <li class="tsbold6">MmmIii123 This line tests tsbold6 (0.06ex)</li> <li class="tsbold7">MmmIii123 This line tests tsbold7 (0.07ex)</li> <li class="tsbold8">MmmIii123 This line tests tsbold8 (0.08ex)</li> <li class="tsbold9">MmmIii123 This line tests tsbold9 (0.09ex)</li> <li class="ltrsp" >MmmIii123 This line tests ltrsp (@Matthew Foscarini)</li> <li class="bold" >MmmIii123 This line tests bold</li> <li class="bolder" >MmmIii123 This line tests bolder</li> <li class="tsbold1 bold">MmmIii123 This line tests tsbold1 (0.01ex) + bold</li> <li class="tsbold2 bold">MmmIii123 This line tests tsbold2 (0.02ex) + bold</li> <li class="tsbold3 bold">MmmIii123 This line tests tsbold3 (0.03ex) + bold</li> <li class="tsbold4 bold">MmmIii123 This line tests tsbold4 (0.04ex) + bold</li> <li class="tsbold5 bold">MmmIii123 This line tests tsbold5 (0.05ex) + bold</li> <li class="tsbold6 bold">MmmIii123 This line tests tsbold6 (0.06ex) + bold</li> <li class="tsbold7 bold">MmmIii123 This line tests tsbold7 (0.07ex) + bold</li> <li class="tsbold8 bold">MmmIii123 This line tests tsbold8 (0.08ex) + bold</li> <li class="tsbold9 bold">MmmIii123 This line tests tsbold9 (0.09ex) + bold</li>
使用JavaScript设置基于unbolded内容的li的固定宽度，然后通过将样式应用于<a>标签（或者如果<li>没有任何子项添加跨度）来加粗内容。
有趣的问题。 我想你正在使用浮点数，对不对？
那么，我不知道任何技术，你可以用来摆脱这种字体放大，因此他们会尝试适应所需的最小宽度 – 不同的字体厚度将改变这个值。
我知道避免这种变化的独特的解决scheme是你说你不想要的：把固定大小设置为李的。
你可以实现这个像amazon.com“按部门购物”hover菜单。 它使用宽div。 您可以创build宽分区并隐藏其正确的部分
更新：不得不使用B标签的标题，因为在IE11伪类我：后没有显示当我有知名度：隐藏。
在我的情况下，我想alignment（自定义devise）inputcheckbox/收音机与标签文本的文本在input检查时变粗体。
这里提供的解决scheme在Chrome中不适用于我。 input和标签的垂直alignment被弄乱了：在psuedo类和-margins没有解决这个问题之后。
这是一个修复你不会遇到垂直alignment问题。
/* checkbox and radiobutton */ label { position: relative; display: inline-block; padding-left: 30px; line-height: 28px; } /* reserve space of bold text so that the container-size remains the same when the label text is set to bold when checked. */ label > input + b + i { font-weight: bold; font-style: normal; visibility: hidden; } label > input:checked + b + i { visibility: visible; } /* set title attribute of label > b */ label > input + b:after { display: block; content: attr(title); font-weight: normal; position: absolute; left: 30px; top: -2px; visibility: visible; } label > input:checked + b:after { display: none; } label > input[type="radio"], label > input[type="checkbox"] { position: absolute; visibility: hidden; left: 0px; margin: 0px; top: 50%; transform: translateY(-50%); } label > input[type="radio"] + b, label > input[type="checkbox"] + b { display: block; position: absolute; left: 0px; margin: 0px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-color: #00a1a6; border-radius: 3px; } label > input[type="radio"] + b { border-radius: 50%; } label > input:checked + b:before { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); content: ''; border-width: 0px 3px 3px 0px; border-style: solid; border-color: #fff; width: 4px; height: 8px; border-radius: 0px; } label > input[type="checkbox"]:checked + b:before { transform: translate(-50%, -60%) rotate(45deg); } label > input[type="radio"]:checked + b:before { border-width: 0px; border-radius: 50%; width: 8px; height: 8px; }
<label><input checked="checked" type="checkbox"/><b title="Male"></b><i>Male</i></label> <label><input type="checkbox"/><b title="Female"></b><i>Female</i></label>
