Question

我正在尝试在我的html / css中使用字体Lato Regular。问题是，每当我加载html文件时，它会显示常规字体（在blahblahblah中）。我检查了那个元素，它检测到font-family应该是'LatoWeb'。但是，LatoWeb显示常规系统字体。我在Linux Firefox btw

中运行它

这是我的HTML代码（html代码保存在app / views / static_pages下）

<!DOCTYPE html>
  <html>
    <head>
      <title>UPrint</title>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <link rel="stylesheet" type="text/css" href="../../assets/stylesheets/Semantic-UI-CSS-master/semantic.min.css">
      <script type="text/javascript" src="../../assets/stylesheets/Semantic-UI-CSS-master/semantic.min.js"></script>
      <link rel="stylesheet" type="text/css" href="../../assets/stylesheets/landing.css">
      <link rel="stylesheet" type="text/css" href="../../assets/stylesheets/latostyle.css">
    </head>
    <body>
      <div class="landing-page-description">
        <img class="ui centered medium image" src="../../assets/images/logo.png">
        <p class="regular"> blah blah blah</p>
      </div>
    </body>
  </html>

这是我的css代码文件名landing.css（css代码保存在app / assets / stylesheets下）（字体保存在app / assets / fonts中）

@font-face {
    font-family: 'LatoWeb';
    src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


body {
  background-color: #3fabad;
}

.landing-page-description {
  position: relative;
}

.regular {
  font-family: 'LatoWeb';
}

Answer 1

请尝试!important。我不确定它是否正常工作。但是你应该试试。因为默认字体会覆盖我们自己的字体。

Answer 2

我能够获得Lato的Google字体。似乎使用计算机中的字体是Mozilla Firefox的一个问题:(必须编辑：config

Answer 3

这应该是评论，但声誉不够

检查浏览器控制台（Firebug）是否正确解析了路径。

使用@ font-family的Lato Font没有出现

3 个答案: