CSS / html更改链接字体

Question

我只想知道应该在哪里更改，以便导致侧边栏的“导航”的字体与其他三个菜单按钮的字体相同。 这是截图https://snag.gy/AnGs58.jpg如您所见，“导航”字体不同，我真的不知道要更改哪个部分。

 /*stylesheet for Negros Occ Central Tourisn Website */ body { margin: 0px; background-image: url(bg.jpg); background: no-repeat center center cover; } #header { background: rgba(0, 0, 0, 0.5); color: white; font-size: 30px; padding: 16px; margin-top: 20px; } #header>#name { font-family: Caviar Dreams; float: left; } #footer { width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 32px; position: fixed; bottom: 0px; } #footer>p { margin: 8px; color: white; font: 12px arial; text-align: right; } /* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: rgba(7, 50, 4, 0.8); overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 100px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ font-family: Caviar Dreams; } /* The navigation menu links */ .sidenav a { margin-top: 10px; padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: white; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus { color: #245009; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; margin-top: 20px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } .button { background-color: #171817; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 0px; float: left; } .button:hover { box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } #menu a, #menubutton a { text-decoration: none; color: white; text-transform: uppercase; font-family: Caviar Dreams; font-size: 13px; } @media only screen and (min-width:600px) { #menu { float: right; display: block; } .menuitem { display: inline; } .menuitem+.menuitem { border-left: 1px solid white; margin-left: 8px; padding-left: 8px; } #menubutton { display: none; } } @media only screen and (max-width:599px) { #menubutton { display: inline; float: right; } #menu { position: absolute; top: 48px; right: 0px; background: black; padding: 16px; } .shownmenu { display: block; } .hiddenmenu { display: none; } .menuitem { display: block; } .menuitem+.menuitem { margin-top: 8px; } } .clear { clear: both; } .content {} 

 <div id="header"> <div id="name">Negros Occidental Tourism Desk</div> <div id="menubutton"><a id="menulink" href="#">Menu</a></div> <div id="menu" class="hiddenmenu"> <button class="button"><div class="menuitem"><span onclick="openNav()">Navigate</span></div></button> <button class="button"><div class="menuitem"><a href="#">Tourist Spots</a></div></button> <button class="button"><div class="menuitem"><a href="#">All Festivals</a></div></button> <button class="button"><div class="menuitem"><a href="#">About NIR</a></div></button> </div> <div class="clear"></div> </div> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" onclick="closeNav()">&times;</a> <a href="#">District 1</a> <a href="#">District 2</a> <a href="#">District 3</a> <a href="#">District 4</a> <a href="#">District 5</a> <a href="#">District 6</a> <a href="#">Bacolod City</a> <a href="#">Negros Oriental</a> </div> <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page --> <div id="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="footer"> <p>Copyright 2017</p> </div> 

谢谢你们！

Answer 1

将span更改a ：

<div class="menuitem"><span onclick="openNav()">Navigate</span></div>

替换为：

<div class="menuitem"><a onclick="openNav()">Navigate</a></div>

Answer 2

您可以使用@cosmoonot答案，也可以使用<span>而不是<a>

.menuitem > span {
   font-family: Caviar Dreams;
}