时间戳

首页 > 解决方案 > 上传到 Bluehost 的字体未显示

html - 上传到 Bluehost 的字体未显示

问题描述

我最近将我的代码上传到了 bluhost，以创建我的投资组合网站。但是，当字体出现在我的计算机上时，当我加载网站（通过主机 bluehost）时它们不会显示。

这是我的 CSS 代码。问题出在 CSS 还是 bluehost 上？

@font-face {
    font-family: playfair-italic;
    src: url(fonts/playfair-display/PlayfairDisplay-Italic.otf);   
}
@font-face {
    font-family: playfair-regular;
        src: url(fonts/playfair-display/PlayfairDisplay-Regular.otf);
}

@font-face {
    font-family: playfair-sc;
        src: url(fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}

@font-face { 
font-family: opensans-regular;
    src: url(fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face { 
font-family: opensans-semibolditalic;
    src: url(fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}

@font-face { 
font-family: opensans-semibold;
    src: url(fonts/open-sans/OpenSans-Semibold.ttf);
}

标签： htmlcssfontsfont-facedisplay

解决方案

尝试在每个 url 之前添加 './' 以将它们转换为相对路径。

@font-face {
    font-family: playfair-italic;
    src: url(./fonts/playfair-display/PlayfairDisplay-Italic.otf);   
}
@font-face {
    font-family: playfair-regular;
        src: url(./fonts/playfair-display/PlayfairDisplay-Regular.otf);
}

@font-face {
    font-family: playfair-sc;
        src: url(./fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}

@font-face { 
font-family: opensans-regular;
    src: url(./fonts/open-sans/OpenSans-Regular.ttf);
}

@font-face { 
font-family: opensans-semibolditalic;
    src: url(./fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}

@font-face { 
font-family: opensans-semibold;
    src: url(./fonts/open-sans/OpenSans-Semibold.ttf);
}

推荐阅读