小编Luí*_*ira的帖子

这是我在Chrome中遇到的错误,不幸的是,搜索它并没有给我太多结果.字体本身正确显示.但是我仍然收到此错误/警告.更具体地说,这是完全警告:

"无法解码下载的字体: http:// localhost:8000/app/fonts/Lato / "

我的CSS是这些:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

我只是不明白.字体已正确应用,但警告始终存在.尝试使用Sans-Serif使字体恢复到正常的浏览器字体,所以可能是它,但我不确定,甚至在搜索后我什么都没找到.谢谢!

编辑

有各种各样的字体文件,都来自同一个家庭.我试图加载它们.字体文件是.ttf.我从本地文件夹加载它们,并有各种字体文件,如Lato-Black.ttf,Lato-Bold.ttf,Lato-Italic.ttf等.

我正在使用VideoJS和Angular 4,我需要在视频之上添加一些自定义叠加层.我成功创建了所有叠加层并将它们连接到Angular组件上的事件.它完全有效,除了它在fullcsreen中.当我将视频全屏显示时,叠加层消失,我只能使用默认的播放器按钮.所以我在叠加层上添加了一个很大的z-index,它们就开始出现了.但每当我点击它们时,都没有任何反应.根据CSS,甚至光标都不会变为指针.我尝试了各种各样的东西,比如videojs overlay插件,但这不起作用,因为它不允许我将一个动作与一个元素相关联.我已经尝试将叠加内容放在视频标记内,但之后它就完全消失了.我已尝试浏览Chrome Dev Tools Web检查器并手动删除正在运行的任何videojs元素的z-index.但什么都没发生.我总能看到我添加的按钮,但从不点击它们.这是我的代码:

.extra-options {
  position: absolute;
  color: #fff;
  bottom: 20px;
  right: calc(100%/2 - 150px);
  font-size: 50px;
  cursor: pointer;
  z-index: 99999999999999999;
}

.player-container {
  width: 100%;
  height: calc(100vh - 190px);
  position: relative;

  video {
    width: 100%!important;
    height: 100%!important;
    margin: 0 auto;
  }
}

<div class="player-container">
    <video id="video" class="video-js vjs-default-skin" controls></video>

    <div class="extra-options" (click)="showExtra()">More options</div>
</div>

当我们没有全屏时,"额外选项"div会出现并正常工作.在全屏时,它显示正确,但我永远不能点击它.我应该添加一个非常重要的细节:这些动作需要在Angular组件中有一个函数.所以"showExtra()"应该是播放器.ts文件中定义的函数.