CSS字体，包括未显示在浏览器中

Question

我正在用HTML链接CSS文件。该CSS文件已上传到另一台服务器上，并且该CSS文件从同一位置导入了字体，并且路径正确，但出现错误，无法正常工作。

以下是屏幕截图：https://pasteboard.co/Ig0ORen.jpg

此字体错误：https://pasteboard.co/Ig0KwNlP.jpg

当CSS在我的本地主机上时它正在工作，但是我想在此服务器上上传CSS和JS及字体。

这是HTML代码：

<link rel="stylesheet" href="http://www.example.com/lib/styles/process.css">

这是CSS代码L

@font-face {
    font-family: pp-sans-small-light;
    src: url(../fonts/p_small_light.eot);
    src: url(../fonts/p_small_light.eot) format("embedded-opentype"), url(../fonts/p_small_light.woff) format("woff"), url(../fonts/p_small_light.svg) format("svg")
}

@font-face {
    font-family: pp-sans-small-regular;
    src: url(../fonts/p_small_regular.eot);
    src: url(../fonts/p_small_regular.eot) format("embedded-opentype"), url(../fonts/p_small_regular.woff) format("woff"), url(../fonts/p_small_regular.svg) format("svg")
}

@font-face {
    font-family: 'consumer-icons';
    src: url(../fonts/icons_sans.eot);
    src: url(../fonts/icons_sans.eot) format('embedded-opentype'), url(../fonts/icons_sans.woff) format('woff'), url(../fonts/icons_sans.ttf) format('truetype'), url(../fonts/icons_sans.svg) format('svg');
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: p_big_sans;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/p_big_sans.eot);
    src: url(../fonts/p_big_sans.woff2) format('woff2'), url(../fonts/p_big_sans.woff) format('woff'), url(../fonts/p_big_sans.svg) format('svg')
}

*,
*:before,
*:after {
    box-sizing: inherit
}

html,
body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
        font-family: pp-sans-small-regular, Helvetica Neue, Arial, sans-serif;
}

Answer 1

检查服务器中是否有未加载的字体文件的权限。我已附上屏幕截图供您参考。右键单击文件和文件夹，然后将权限更改为755。

Answer 2

您在这里只引用了@ font-face字体-

@font-face {
    font-family: pp-sans-small-light;
    src: url(../fonts/p_small_light.eot);
    src: url(../fonts/p_small_light.eot) format("embedded-opentype"), 
    url(../fonts/p_small_light.woff) format("woff"), url(../fonts/p_small_light.svg) 
    format("svg")
}

..但是您尚未在任何地方声明它们的使用。

例如，您需要在想要使用的位置分配字体；

body { font-family: pp-sans-small-regular; }
p { font-family: pp-sans-small-light; }