Fatal编程技术网
  • javascript/
  • CSS/Javascript滑块的字体问题。字体不在远程服务器上显示，但在本地服务器上可用

CSS/Javascript滑块的字体问题。字体不在远程服务器上显示，但在本地服务器上可用

javascript html css fonts

CSS/Javascript滑块的字体问题。字体不在远程服务器上显示，但在本地服务器上可用,javascript,html,css,fonts,Javascript,Html,Css,Fonts,看起来该字体不适用于我的旋转木马（或滑块）。我的计算机上没有安装它使用的字体。在我的本地测试服务器上，左右箭头和按钮工作正常。在远程服务器上，它们没有。从远处看，它甚至可能使用另一种字体。匕首或十字形字符不是“光滑”字体。我把它放在模板（Dreamweaver）页面的头部和我的自定义CSS文件中，以防单独在slick-theme.CSS文件中使用时出现问题：@font-face{font-family:slick；src:url（'font/slick.eot？#iefix'）格式（'embed

看起来该字体不适用于我的旋转木马（或滑块）。我的计算机上没有安装它使用的字体。在我的本地测试服务器上，左右箭头和按钮工作正常。在远程服务器上，它们没有。从远处看，它甚至可能使用另一种字体。匕首或十字形字符不是“光滑”字体。我把它放在模板（Dreamweaver）页面的头部和我的自定义CSS文件中，以防单独在slick-theme.CSS文件中使用时出现问题：@font-face{font-family:slick；src:url（'font/slick.eot？#iefix'）格式（'embedded-opentype'）、url（'font/slick.woff'）格式（'woff'）、url（'font/slick.ttf'）格式（'truetype'）），url（'font/slick.svg#slick'）格式（'svg'）；}。旋转木马自带了自己的CSS文件。。。slick.css和slick-theme.css。我还将字体的副本放在主字体文件夹中。原件是光滑的/fonts/

此页面将显示本地服务器和远程服务器上滑块的屏幕截图

这在模板页面中，因此它也将出现在每个页面中：

<!doctype html>
<html>
<head>
<style>
@font-face { font-family: slick; src: url('../fonts/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick.woff') format('woff'), url('../fonts/slick.ttf') format('truetype'), url('../fonts/slick.svg#slick') format('svg'); }  

    .header-div {
    width: 100%;
    height: 250px;
    background-image: url (../img/t-shirts-header-wide-1920x180.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 75%;
        margin: 50px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
        /* font-size: 18pt; */
    }

</style>
</head>
<body>
(Page Content with the Scripts Below It.)

 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="../slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".variable").slick({
        dots: true,
        infinite: true,
        variableWidth: true
      });
    });
  </script> 

</body>
</html>
这是slick.css文件

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
如果我无法在此处放置图像，此页面将显示本地服务器和远程服务器上滑块的屏幕截图。如果有人想查看此滑块附带的任何相关文件，我很乐意将它们复制到Google Drive并提供链接。这就是我获得滑块文件的地方：如果能够使用这样的模板而不是从头开始构建，那就太好了。。。这需要更多的时间

如果有人碰巧知道这个问题是什么，那就太好了。也许有人以前使用过这样的模板

它们不能在主字体文件夹中，如果您的css文件是
/css/slick/slick.css
，则光滑字体必须放入
/css/slick/font/
，因为css文件正试图从其相对位置加载

 src: url('fonts/slick.eot');
表示CSS文件在名为字体的子目录中的当前目录。

我假设您已经解决了它，但如果没有，我找到了解决方案

我刚刚解决了

正如我之前提到的，我不能将UTF-8放在我所有的站点中，所以我发现在文件slick-theme.css中定义了第92行

      `.slick-prev:before
         {
           content: 'â†';
            }
           [dir='rtl'] .slick-prev:before
            {
            content: '→';
            }
              `
这和我在网上看到的一样

所以我在图书馆的另一个文件里找到了 
$slick prev字符：“\2190”！违约

因此，我只是尝试将字符的数字引入css定义


          `.slick-prev:before
              {
             content: '\2190';
             }
            [dir='rtl'] .slick-prev:before
             {
              content: '\2190';
              }`


这在某种程度上解决了UTF-8转换的问题


                `content: 'â†';` 


在

希望帮助别人。
当做

Sergio
我的本地服务器上的所有内容都肯定已上载到远程服务器。。。所以远程没有丢失任何内容。字体位于slick/fonts/文件夹中。我只是将它们的副本放在主字体文件夹中，并将它们的css添加到我的自定义css文件和页眉中，以确保它们在使用时不会出现问题。并且在远程计算机上对slick/fonts目录和文件的权限是否正确？这让我明白了好几次。我不知道你说的“权限”是什么意思。我进入FileZilla，右键单击文件夹，得到了一个小的权限面板。从未知道或考虑过这样做。我在文件夹和文件的所有框中打上复选标记。没什么区别。

                `content: 'â†';` 



                `content: '\2190';`