[英]Why Is My Font Only Messing up in one section of my website
所以基本上我使用的是來自 dafont.com 的名為 merkur 的字體,我下載了它並將其添加到我的文件中。 后來字體出現了,但發生了一些奇怪的事情。 我的視頻頂部的文字變得很奇怪,但是當我查看不在視頻頂部的字體時,字體很好。 發生了什么,我該如何解決這個問題
我已經檢查過是否是居中搞砸了,或者是字體大小搞砸了。
<div class="bgsection">
<div class="video-container">
<video autoplay loop muted>
<source src="BGVIDEO.mp4" type="video/mp4">
</video>
</div>
<div class="color-overlay"></div>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<img class="logo" src="\Ahmed,Shahriyar\2019-2020\Computer-Science-3\Assignments\01-Project-Portfolio\3-Logos-and-Layout\Logo1.png" width="150" height="70">
<span class="open-slide">
<a href="#" onclick="openNav()">
<svg width="30" height="40">
<path d="M0,8 40,5" stroke="black" stroke-width="6"/>
<path d="M0,17 040,14" stroke="black" stroke-width="6"/>
<path d="M0,26 40,23" stroke="black" stroke-width="6"/>
</svg>
</a>
</span>
</div>
</div>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Home</a>
<a href="#">Portfolio</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>
<div class="text-overlay" >
<h1>KS DESIGNS</h1>
</div>
</div>
<center>KS DESIGN KS DESIGN KS DESIGN KS DESIGN KS DESIGNS </center>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "450px";
document.getElementById("main").style.marginright = "450px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginright= "0";
}
// Show loading animation.
var playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
</script>
CSS
@font-face {
src: url("Merkur.ttf");
font-family: Merkur;
}
body {
font-family: "Merkur";
margin: 0px;
overflow-x:hidden;
font-size: 72px;
}
ul {
list-style-type: inline;
margin: 0;
padding: 0;
overflow: hidden;
background: -webkit-linear-gradient(left, #00d2e9 0%,#045962 100%);
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
wth: 100%;
z-index: 99;
}
li {
float: left;
margin-right: 80px;
font-size: 30px;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none ;
}
li a:hover {
background-color: #000000;
color: white;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
opacity: 0.9;
text-align: center;
}
.sidebar a {
padding: 50px 8px 8px 32px;
text-decoration: none;
font-size: 50px;
color: white;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #a38313;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: -25px;
font-size: 36px;
margin-right: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-right .5s;
padding: 16px;
}
/* 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) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
.navbar{
background-color: #f6c399;
margin: 0px;
padding: 0px;
z-index: 2;
top: 0;
width: 100%;
}
.logo{
margin: 0px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
.bgsection {
position: relative;
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.bgsection nav{
height: 80px;
}
.video-container video{
min-width: 100%;
min-height: 100%;
}
.color-overlay{
height:100vh;
position: absolute;
top:0;
left:0;
width:100vw;
z-index:1;
background-image: linear-gradient(#a38313, black);
opacity:0.55;
}
.open-slide{
margin-top: 25px;
right: 20px;
position: absolute;
}
.text-overlay{
align-self: center;
text-align: center;
width: 100%;
z-index: 2;
position: absolute;
font-size: 72px;
color: black;
}
信譽低,無法添加評論
我的調試建議:
我對 Chrome 很熟悉,所以我建議打開開發者工具,選擇 header 文本並使用屬性 window 來查找字體系列的設置方式。 一個可能的問題可能是<h1>
被其他一些 css 設置為不同的字體系列
您可以通過創建顯示正在發生的事情的 jsfiddle 或筆來改進您的問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.