将字体粗细更改为粗体会无意中改变元素的宽度[重复]
Posted
技术标签:
【中文标题】将字体粗细更改为粗体会无意中改变元素的宽度[重复]【英文标题】:change of font-weight to bold is unwantingly changing width of element [duplicate] 【发布时间】:2013-07-13 02:07:24 【问题描述】:在为我的网站创建导航栏时,出于可用性目的,我决定将活动页面选项卡显示为粗体,但是当我更改元素上的 font-weight
时,它只会稍微使元素变宽,这是我制作的一个示例使用悬停效果代替了我的问题,我从来不知道解决它的方法..
http://jsfiddle.net/amx7E/
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
*
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;
【问题讨论】:
如果你增加font-weight
,那么文本需要更多的空间来显示,那就是它也增加了元素的宽度。
这对我没有用,因为我需要在没有宽度的情况下指定它
【参考方案1】:
有趣的是没有人提到letter-spacing
。
可以为普通字体添加字母间距,并为粗体版本删除它。
并非总是能做到正确,很大程度上取决于字体和font-size
。但随着越来越多的浏览器开始接受亚像素值作为字母间距,它开始变得更加实用。
例子:
.nav-link.active
font-weight: bold;
/* Adjust for font-weight bold so that the text will still align */
letter-spacing: -1px;
【讨论】:
非常好。我现在在一些场合尝试了字母间距,发现在某些情况下它可能很棒,但在其他情况下它看起来并不是最好的,也许某些字体的字体字距问题没有帮助。 ...可能是因为它不起作用。它可能会意外地在某些具有某些字体大小的字体的系统上工作(可能主要是在 Windows 上,愚蠢的字体渲染引擎可能会将每个字母加厚一个像素),但绝对不能在 Linux 或 Mac 上工作,因为字母只是粗体时宽像素。【参考方案2】:font-weight
加粗文本的替代方法是使用text-shadow
设置与文本颜色相同的水平阴影。此代码在左侧和右侧设置相等的阴影。只有一个阴影,文本看起来会朝着阴影的方向移动。
CSS:
a:hover
text-shadow: .25px 0px .1px,
-.25px 0px .1px;
请注意,Web 浏览器不会呈现文本,更不用说 text-shadow
效果了。在决定值之前,您需要检查它们在多个浏览器中的外观。
【讨论】:
【参考方案3】:我是怎么做到的:
<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>
【讨论】:
【参考方案4】:我处理这个问题的方法是使用 JQuery 来“修复”宽度,这样即使粗体确实发生了变化,它也不会在悬停时发生变化。这基本上采用了此处的 css 宽度答案并自动化了该过程。
(function($)
$(function()
$('#menu > li').each(function()
wid = $(this).width();
$(this).css('width', wid+'px');
);
);
)(jQuery);
【讨论】:
这很有帮助,尽管我必须添加一些额外的像素以使bold
有足够的空间,即var wid = $(this).width() + 10
。
是的,@Nick 可能是个好主意。
我喜欢这个简单的,因为我可以将这种类型的代码埋在一个角度指令中,它也很干净。【参考方案5】:
这里除了width
路线还有另外两种可能,看你觉得合适不合适就看个人喜好了。这两个想法的工作原理相同,即您使用单独的元素来显示粗体状态,并且该元素不会(想法一)或确实(想法二)影响 UI 的尺寸。
http://jsfiddle.net/3Jyge/2/
想法一
使用伪选择器。此方法依赖于支持最新进展的浏览器,即:before
和content: attr()
,因此可能还不可靠。
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');
标记:
<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>
想法二
另一个更直接一些,尽管它依赖于首先准备好你的标记——那些使用屏幕阅读器的人可能不喜欢你的网站是可以理解的;除非你能找到一种很好的方法来隐藏重复的文本。
标记:
<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:
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;
归根结底,更好的解决方案是:
-
设置宽度,虽然我可以理解不想这样做。
使用 javascript 计算尺寸。
选择不同的突出显示,一个不会改变文本尺寸的突出显示。
【讨论】:
感谢您的建议。我是您第一个想法的忠实拥护者,但是正如您在向后兼容性方面所说的那样,您遇到了绊脚石。我认为最好引入 HTML 的是那些自定义的data-
属性,对于在 jQuery 和 CSS 中使用非常有帮助。
@LeeB ~ 不用担心,是的,涉及attr()
的任何事情都必须等待这一刻,至少要等到另一个 Internet Explorer 版本可能:) 或者至少要等到有人想出一个快速的 js shim 向后移植兼容性。
支持选项 2。我们可以将 aria-hidden 用于其中一个屏幕阅读器。【参考方案6】:
没有。它将改变父 div 的大小。
我想引用昆汀的回答。
字体是比例字体,所以会变得更粗(并且占用更多 水平空间)当它加粗时。
查找更多信息here。
【讨论】:
【参考方案7】:我认为没有基于 CSS 的解决方案,除非您可以为每个 li 项目添加宽度,也许是不同的宽度。 您已经在悬停和选定状态下更改了 bg 颜色,我建议您放弃字体粗细更改。视觉上变化不大,而且就可用性而言,你已经有了我认为足够的背景颜色变化。
【讨论】:
我决定现在就这样做,当我已经有办法识别它时,浪费时间思考另一个解决方案是没有用的。感谢您的建议。【参考方案8】:由于您没有为元素指定任何宽度,因此它们会根据其内容调整大小。因此,当font-weight
为normal
时,元素占用的空间比bold
时要少。随着内容大小的改变,盒子的大小也会改变。
您可以指定元素的宽度,使其略大于其内容,或者使用不同的方法来标识当前活动的选项卡。
【讨论】:
没错。据我所知,您需要指定一个宽度(无论它是百分比还是像素)。由于未设置宽度,因此默认值“auto”有效,因此如果内容占用更多空间,则元素会变得更大,就像粗体一样。 有道理,但我很好奇是否有任何简单的技巧可以解决流体宽度问题,但我想没有。 标记为正确,在某些情况下这将是解决方案,但对于我的问题,这不是解决方案。【参考方案9】:如果你把宽度属性放在你的 .navItem 类中,那么在悬停时宽度不会改变。
.navItem
display: block;
float: left;
position: relative;
**width:70px;** // this
我已经更新了小提琴。请检查。
【讨论】:
分配宽度的问题是我已经做到了,所以没有宽度,否则我必须让Mens
的标签不必要地宽于Accessories
的标签跨度>
然后你可以单独为 元素分配宽度。
我想我会找到一种不同的方式来识别活动选项卡,如果没有办法在没有设置宽度的情况下根据字体重量停止宽度波动,那么我会做一些基于颜色的事情相反,我认为以上是关于将字体粗细更改为粗体会无意中改变元素的宽度[重复]的主要内容,如果未能解决你的问题,请参考以下文章