无意中更改了标题按钮的文本/字体重量
问题描述：
我正在为页面创建标题，但是从某些方面来说，我注意到正在启动下拉菜单（Safari 8）时正在更改文本系列。然后我试图在Chrome中打开它，启动jQuery函数时它没有改变。但是，当我试图改变字体，但它没有任何区别。它根本没有改变字体。所以，即使我没有指定标题标签的字体，它仍然是格式化的。预先感谢您的帮助。如果这只是庄园的错误，我很抱歉，我对此很新。无意中更改了标题按钮的文本/字体重量
$(document).ready(function() {
\t $('.hdr-drpdwn-menu').hide();
\t $('.hdr-list-more').hover(
\t \t function() {
\t \t \t $(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
\t \t },
\t \t function() {
\t \t \t $(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
\t \t }
\t);
});/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
\t margin: 0;
\t padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
\t margin: 0;
\t padding: 0;
\t border: none;
\t background-color: transparent;
}
ul, li {
\t list-style: none;
}
a, a:active, a:visited {
\t text-decoration: none;
}
#header {
\t position: fixed;
\t top: 0;
\t left: 0;
\t width: 100%;
\t height: 40px;
\t background-color: #5a5a5a;
\t font-style: normal;
}
#header .hdr-nav-opt {
\t float: left;
\t margin-left: 10px;
\t background-color: transparent;
}
#header .hdr-nav-soc {
\t float: right;
\t margin-right: 10px;
\t background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
\t display: inline;
\t background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
\t height: 40px;
\t color: #fff;
\t font-size: 20px;
\t text-align: center;
\t padding-left: 5px;
\t padding-right: 5px;
\t background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
\t background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
\t position: relative;
\t width: 120px;
\t margin-left: 40px;
\t background-color: #5a5a5a;
\t box-shadow: 2px 2px 10px #888888;
\t border: 1px solid #888888;
} \t
.hdr-drpdwn-menu .hdr-button {
\t width: 100%;
\t height: 40px;
\t color: #fff;
\t font-size: 20px;
\t text-align: center;
\t padding-left: 5px;
\t 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-->
\t <div class="hdr-nav-opt">
\t \t <ul class="hdr-nav-list">
\t \t \t <li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
\t \t \t <li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
\t \t \t <!-- The Dropdown Menu-->
\t \t \t \t <div class="hdr-drpdwn-menu">
\t \t \t \t \t <ul class="hdr-drpdwn-list">
\t \t \t \t \t \t <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
\t \t \t \t \t \t <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
\t \t \t \t \t \t <li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </li>
\t \t </ul>
\t </div>
<!-- The Right part of the header-->
\t <div class="hdr-nav-soc">
\t \t <ul class="hdr-nav-list">
\t \t \t <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
\t \t \t <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
\t \t \t <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
\t \t \t <li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
\t \t </ul>
\t </div>
</div>
答
我不知道哪种字体你现在正在使用，但也许你需要一个回调在您的样式
.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;
}
，它会工作的所有的浏览器。
+0
问题是，即使我没有指定字体系列，它仍然没有使用默认的一个 – Pet3rMatta
+0
你可以显示你的代码吗？只是为了看看你在哪里调用字体 – Lariicsa
请澄清一下您的问题。当你说“文字家庭”时，你的意思是“字体家族”吗？另外，你在哪里应用字体家族到你的菜单？请参阅：[MDN：font-family]（https://developer.mozilla.org/en-US/docs/Web/CSS/font-family） – Roberto
为什么要在链接中使用按钮？ –
可能不相关，但仍然可以，jQuery 1.3.1可以真正使用更新！ – Pevara