为列表创建更好的导航结构

Question

Fellow Stackers，

我希望对网站上的导航列表提出一些建议，我有一些问题，这些是，

1）字体渲染在普通和粗体之间切换 - 它将列表移动一个像素，无论如何这可以改进吗？ 2）主动菜单标记，我已经实现了一个标记来突出显示类别，它没有做到最好的方法是否有更好的方法可以做到这一点？

有问题的网站 - http://vignettedesign.com.au/test/

愿意学习和改进这个......

Answer 1

问题在于您的字体Quicksand。 Quicksand是一个免费的webfont，你也可以通过Google Fonts (Quicksand)获得。由于一些奇怪的原因（因为这样做绝对很奇怪），导航a:hover CSS会将悬停链接的字体从CustomFive更改为QuickSand。

后者可以在我收录的Google字体链接上查看，我认为在您的网站中包含的字体为Quicksand Light，其渲染效果非常差（如字母缺少像素）。 This article（在“原因2”中）简要解释了为什么某些免费字体对于企业来说并不理想。

您需要在style.css中找到包含此CSS的行：...然后删除font-family行。 谷歌Chrome Inspector告诉我它在文件中的1344行和1566行。 （你必须更换它们。）

.main-navigation li ul li a:hover {
  background: #FDFDFD; /* set this to any color you which to appear as "highlight" */
  color: #000; /* change this color if you want your textcolor to change on hover */
  font-family: "Quicksand", Helvetica , Arial;
}

注意：

• 你defo不需要一个插件来突出一个悬停的链接，只需调整CSS。
• 这是你的选择，但如果我是你，我会将Quicksand字体全部替换为另一个字体（所有导航项和使用此字体的段落中的可读性差），或者至少设置其字体权重到600。
• 额外提示：我的1920x1080 15：8英寸屏幕几乎无法读取您的段落。考虑将字体大小设置为2或3像素。