無法在 css 中使用此自定義字體

Question

我無法使用 @font-face 將此自定義字體添加到我的 css 中。 我用它工作的其他字體嘗試了這段代碼，但我不能用這種字體。

@font-face{
    font-family:"Megatron";
    src:url{"fonts/Megatron.otf"};
}
h1{
    font-family: Megatron;
}

<h1>Enigma</h1>

這是字體的鏈接https://blogfonts.com/megatron.font

Answer 1

此字體（以及您要使用的其他字體）必須位於項目文件夾的fonts文件夾中。 嘗試此代碼后：

@font-face{
    font-family:"Megatron";
    src:url("/fonts/Megatron.otf") format("opentype");
}
h1{
    font-family: Megatron;
}

PS您的字體鏈接不起作用:(

Answer 2

您應該嘗試在@font-face 中設置您的字體格式。

@font-face {
    font-family:"Megatron";
    src:url{"fonts/Megatron.otf"} format("OpenType");
}

此外，檢查您的字體是否在您的網頁中下載良好：使用網絡面板然后檢查字體

Answer 3

這是CSS的代碼。 如果您需要任何幫助，請告訴我。 並將字體文件夾添加到您的路徑中。 希望它會起作用。

@font-face {
font-family: 'Conv_Megatron';
src: url('fonts/Megatron.eot');
src: local('☺'), url('fonts/Megatron.woff') format('woff'), url('fonts/Megatron.ttf') format('truetype'), url('fonts/Megatron.svg') format('svg');
font-weight: normal;
font-style: normal;

}

.demo
{
    font-family:'Conv_Megatron',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:left;
    border:1px solid #666;
    padding:10px;
}

<div class="demo" style="font-size:25px">
    The quick brown fox jumps over the lazy dog.
</div>