字體無法在chrome中正確顯示

Question

我的wordpress主題中的style.css中有以下字體。

@font-face {
    font-family: 'latoregular';    
    src: url('./fonts/lato-regular.eot');
    src: url('./fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/lato-regular.woff2') format('woff2'),
    url('./fonts/lato-regular.woff') format('woff'),
    url('./fonts/lato-regular.ttf') format('truetype'),
    url('./fonts/lato-regular.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bebasregular';
    src: url('./fonts/bebas___-webfont.eot'); 
    src: url('./fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/bebas___-webfont.woff2') format('woff2'),
    url('./fonts/bebas___-webfont.woff') format('woff'),
    url('./fonts/bebas___-webfont.ttf') format('truetype'),
    url('./fonts/bebas___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'coustardregular';
    src: url('./fonts/coustard-regular.eot');
    src: url('./fonts/coustard-regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/coustard-regular.woff2') format('woff2'),
    url('./fonts/coustard-regular.woff') format('woff'),
    url('./fonts/coustard-regular.ttf') format('truetype'),
    url('./fonts/coustard-regular.svg#coustardregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

這是h2元素中的文本

h2元素具有coustardregular font-family和bold font-weight。 正如您在圖像中看到的，字母T的結構非常奇怪，字母I的結構也很奇怪。我僅在chrome中遇到了此問題，而在其他地方都沒有。 我也嘗試了此鏈接，但它不起作用，對此我一無所知。 有人可以指導我嗎？

Answer 1

您從哪里獲得字體文件？ 我通常會嘗試使用Google字體，而不是使用文件負載，因為您知道它們會在經過嘗試和測試后才能正常工作，而在很多時候，當您使用單個文件時，它們都是從另一個文件轉換而來的文件類型，這是很多問題的來源。

Google字體具有Coustard字體，您只需在css文件（位於頂部）中添加以下內容即可使用它：

@import url(https://fonts.googleapis.com/css?family=Coustard);

...或前往Google進行自定義-https: //www.google.com/fonts/specimen/Coustard