登录
当前位置： 首页 > 知识库问答 >
问题：

CSS/JavaScript滑块字体问题。字体不在远程服务器上显示，但在本地服务器上有效

欧阳元魁
2023-03-14

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

此页将显示我的本地服务器和远程服务器上的滑块的屏幕截图。http://sungraffix.net/img/misc/slider-issule.html

这是在模板页面中,因此它也将在每个页面中：

<!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-theme.css文件：

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('fonts/slick.eot');
    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');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: #4d004d;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: #4d004d;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}



.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 36px;
    line-height: 1;

    opacity: .75;
    color: #4d004d;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -50px;
}
[dir='rtl'] .slick-prev
{
    right: -40px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -30px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -30px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: #4d004d;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 14px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: #4d004d;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #4d004d;
}

这是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;
}

如果我不能在这里放置图像，这个页面将显示我的本地服务器和远程服务器上的滑块的屏幕截图。http://sungraffix.net/img/misc/slider-issule.html如果有人想查看滑块附带的任何相关文件，我很乐意将它们复制到Google Drive并提供链接。这就是我获得滑块文件的地方:http://www.jqueryrain.com/2014/04/slick-jquery-fully-responsive-carousel-plugin/如果能够使用这样的模板而不是从头开始构建就好了...这将需要更多的时间。

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

共有2个答案

梁丘权
2023-03-14

我假设你已经解决了，但如果没有，我找到了解决办法。

我刚解决了。

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

      `.slick-prev:before
         {
           content: 'â†';
            }
           [dir='rtl'] .slick-prev:before
            {
            content: '→';
            }
              `

这和我在网上看到的一样

因此，在库的另一个文件中，我发现$slick-prev-character：“\2190”！default；

所以我只是尝试将字符的编号带到css定义中

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

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

                `content: 'â†';`

在

                `content: '\2190';`

希望帮助别人。向塞尔吉奥致意

邵浩大
2023-03-14

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

 src: url('fonts/slick.eot');

表示CSS文件在一个名为Fonts的子目录中的当前目录。

 类似资料：
  • 服务器上的javamail问题但在本地工作

    我一直在努力从我的ubuntu服务器发送邮件。奇怪的是，它在我的mac上的本地tomcat实例上运行得非常好。 以下是我的实现: 让我恼火的是，javamail的输出日志在我的服务器和本地是一样的，而且没有错误: 到目前为止我所做的一切 > 检查我的垃圾邮件（比如一千次，以防万一... 尝试了其他端口，如465和25- 使用iptable打开587端口 iptables -A 输出 -p tcp

  • 在远程服务器上运行本地python脚本

    问题内容： 我正在调试一些必须在我的虚拟机上运行的python脚本。而且，我更喜欢在本地（虚拟机外部）编辑脚本。因此，我发现每次都将脚本修改为虚拟机 很繁琐。谁能提出一些有效的方法？ 特别是，我想知道是否可以在远程PVM上执行python脚本。像这样： 问题答案： 可以使用ssh。Python接受连字符（-）作为执行标准输入的参数， 运行 python –help 以获得更多信息。

  • 图像在本地加载，但不在heroku服务器上

    图像的html代码 heroku bash显示Howling.jpg

  • 在远程服务器上的docker容器中设置本地PyCharm远程解释器

    我有： 本地PyCharm 带有docker容器的远程服务器 我想在远程docker容器Python解释器中运行本地PyCharm代码（远程服务器上的代码），以便调试。怎么设置？ 我还在互联网上找到了一些文章，其中包含我不需要的以下描述： 地方魅力-

  • 在eclipse上安装远程glassfish服务器

    我不是java程序员，对eclipse或web服务了解不多。我需要创建一个web服务，然后在windows服务器上进行设置。因此，我在eclipse juno ee中设置了一个本地主机Glassfish 3.1.2.2并创建了一个web服务。现在它将被转移到vm Windows2008服务器上。 我错过了什么？它似乎没有尝试或接近服务器，一旦按下ping就会出现错误。 如果是防火墙之类的东西，如何

  • 服务器上的wkhtmltopdf unicode和自定义字体

    我有一个超文本标记语言页面，通过wkhtmltopdf转换为PDF。在我的本地机器上，一切都很好，阿拉伯字体，PDF转换为它们，新的自定义字体。我使用了@font-face，本地存储的字体和utf-8编码。没有问题。 但是在服务器上，不仅（1）阿拉伯字符会变成黑盒，（2）甚至连不太特别的英语字体（如乔治亚字体和冲击字体）也会停止工作。PDF是以无衬线的方式呈现的。也就是说，如果它能呈现的话。有时它

相关问答

服务器上的wkhtmltopdf unicode和自定义字体远程服务器上的Spring访问 JMSfop 2.1在weblogic服务器上加载字体时达到EOF从本地触发远程服务器上的快照启动远程服务器上的服务失败

相关文章

在本地xampp / apache服务器上设置SSL访问远程MBean服务器Dropzone.js-显示服务器上的现有文件服务器的全局区域性在不同服务器上不同时的DateTime问题服务器在WAMP服务器中没有响应（或本地MySQL服务器的套接字未正确配置）

相关阅读

Matplotlib显示中文字体DB2服务器版本功能Linux 云服务器Dubbo HTTP 服务器配置Web服务器过程

相关工具

Xlight FTP服务器CSharp 邮件服务器东雅WEB服务器JAGS 游戏服务器多线程页面抓取服务器

相关文档

IPsec VPN 服务器一键安装脚本Seafile 服务器用户手册Vue.js 服务器端渲染指南DIY 一个实用的 miniLAPP 服务器Web 服务器（IIS）管理 中文帮助文档 v7.5
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.