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

问题描述

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

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

我发布了我的CSS和HTML文件：

大师.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';

索引.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

请理解我的英语有点弱。

谢谢，

标签： htmlcssfonts

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

问题描述

解决方案

推荐阅读