javascript - 标题按钮的文本/字体粗细无意中改变

Question

我正在为页面制作标题，但从某个时候我注意到在启动下拉菜单时文本系列正在更改(Safari 8)。然后我尝试在 Chrome 中打开它，在启动 jQuery 函数时它没有改变。但是当我尝试更改字体时，却没有任何区别。它根本没有改变字体。所以即使我没有为标题选项卡指定字体，它仍然是格式化的。在此先感谢您的帮助。如果这只是一些庄园错误，我很抱歉，我对此很陌生。

$(document).ready(function() {
	$('.hdr-drpdwn-menu').hide();
	$('.hdr-list-more').hover(
		function() {
			$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
		},
		function() {
			$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
		}
	);
});

/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
	margin: 0;
	padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
}
ul, li {
	list-style: none;
}
a, a:active, a:visited {
	text-decoration: none;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background-color: #5a5a5a;
	font-style: normal;

}
#header .hdr-nav-opt {
	float: left;
	margin-left: 10px;
	background-color: transparent;
}
#header .hdr-nav-soc {
	float: right;
	margin-right: 10px;
	background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
	display: inline;
	background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
	height: 40px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
	background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
	position: relative;
	width: 120px;
	margin-left: 40px;
	background-color: #5a5a5a;
	box-shadow: 2px 2px 10px #888888;
	border: 1px solid #888888;
}	
.hdr-drpdwn-menu .hdr-button {
	width: 100%;
	height: 40px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
	<div class="hdr-nav-opt">
		<ul class="hdr-nav-list">
			<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
			<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
			<!-- The Dropdown Menu-->
				<div class="hdr-drpdwn-menu">
					<ul class="hdr-drpdwn-list">
						<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
						<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
						<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
<!-- The Right part of the header-->
	<div class="hdr-nav-soc">
		<ul class="hdr-nav-list">
			<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
			<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
			<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
			<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
		</ul>
	</div>
</div>

Answer 1

我不知道你现在使用的是哪种字体，但也许你需要在样式中进行回调

.hdr-drpdwn-menu .hdr-button {
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 20px;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

它适用于所有浏览器。