Question

我们正在为 google字体设计一种网络字体。我们的图标字符显示在 localhost 上，但是在Linux服务器上上传此文件时，不会呈现该图标。

当我检查时，网站向我显示了一些警告。

我发布了 CSS 和 HTML 文件：

master.css

/* FONTS*/
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,latin-ext');
@import '../fonts/fontawesome-free-5.6.1/css/all.min.css';
@import '../fonts/stroke/style.css';
@import '../fonts/elegant/style.css';
@import '../fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css';
@import '../fonts/simple-line-icons/css/simple-line-icons.css';
@import '../fonts/flaticon/font/flaticon.css';


/* PLUGIN CSS */

@import '../libs/bootstrap-4.1.3/bootstrap.css';                /* bootstrap */
@import '../plugins/headers/header.css';                /* header */
@import '../plugins/headers/yamm.css';                /* header */
@import '../plugins/slider-pro/slider-pro.css';         /* main slider */
@import '../plugins/slick/slick.css';         /* sliders */
@import '../plugins/slick/slick-theme.css';         /* sliders */
@import '../plugins/magnific-popup/magnific-popup.css';            /* modal */
@import '../plugins/animate/animate.css';                        /* animations */
@import '../plugins/flowplayer/skin/playful.css';          /* video-player */
@import '../plugins/noUiSlider/nouislider.css';          /* slider number */
@import '../plugins/bootstrap-select/css/bootstrap-select.min.css';                /* bootstrap-select */



/* MAIN CSS */

@import 'main.css';
@import 'color.css';
@import 'responsive.css';

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home | Etgo</title>
    <meta content="Etgo" name="description">
    <meta content="Etgo" name="keywords">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="telephone=no" name="format-detection">
    <meta name="Etgo" content="true">
    <link rel="stylesheet" href="assets\css\master.css">


    <!-- SWITCHER-->
    <!-- 
    <link href="assets\plugins\switcher\css\switcher.css" rel="stylesheet" id="switcher-css">
    <link href="assets\plugins\switcher\css\color1.css" rel="alternate stylesheet" title="color1">
    <link href="assets\plugins\switcher\css\color2.css" rel="alternate stylesheet" title="color2">
    <link href="assets\plugins\switcher\css\color3.css" rel="alternate stylesheet" title="color3">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
     -->


     <link rel="icon" type="image/x-icon" href="assets/favicon.png">


    <!--[if lt IE 9 ]>
<script src="/assets/js/separate-js/html5shiv-3.7.2.min.js" type="text/javascript"></script><meta content="no" http-equiv="imagetoolbar">
<![endif]-->

    <style type="text/css">
               .element {display:none;}

        @media screen and (max-width: 600px) {
        .element{ display: inline;}
        .element2{ display: none;}
        }
    </style>
</head>

警告

Failed to decode downloaded font: https://etgocorp.in/website/assets/fonts/simple-line-icons/fonts/Simple-Line-Icons.txt
index.html:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
index.html:1 Failed to decode downloaded font: https://etgocorp.in/website/assets/fonts/flaticon/font/Flaticon.txt
index.html:1 OTS parsing error: incorrect file size in WOFF header
index.html:1 Failed to decode downloaded font: https://etgocorp.in/website/assets/fonts/fontawesome-free-5.6.1/webfonts/fa-brands-400.txt
index.html:1 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

请理解我的英语有点弱。

谢谢

Answer 1

实际上我们是通过FTP上传的字体文件。所以有时是FTP客户端破坏了文件。因此我们通过将字体文件上传到cpanel。

我们得到了解决方案。

感谢您的有用回复

Answer 2

最好将它下载并上传到Linux服务器上。

我看到您收到错误消息“无法解码下载的字体”，并且文件中包含.txt。 -链接可能有问题吗？自己仔细检查链接。

另外，我看不到您在index.html中导入任何这些样式，请尝试下载字体并将其上传到服务器上。

字体图标显示在本地主机上，但在线上传时未显示

2 个答案: