【问题标题】:want to use lato light - font weight not changing想使用 lato light - 字体粗细不变
【发布时间】:2017-01-16 04:31:23
【问题描述】:

想用拉托灯..以下没用:

body {
    font-family: "lato"; 
    background-color: white;
    font-weight: 300; 
}

可能出了什么问题?

【问题讨论】:

  • 你能不能发一个完整的代码,因为这根本没用?
  • 您是否加载了浅色字体?你可以发布你的 html 来配合这个吗?

标签: css fonts


【解决方案1】:

为了能够使用特定的font-weight,您首先必须加载它。

实际解决方案:

用这个替换你的<link>标签导入Lato

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

请注意family:Lato:300,400,700 部分。更改它以适应您项目的font-weight 需求。如果您使用 Latin Extended 子集,您还需要添加它,方法是将链接更改为

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext" rel="stylesheet">

您可以深入挖掘并从您的服务器提供字体文件,但总体而言,就页面速度而言,不建议这样做。

【讨论】:

    【解决方案2】:

    这不是很多信息,但我会这么说。要更改任何字体的字体粗细,您需要包括为每个字体粗细包含不同的字体文件。例如,如果您使用此链接从谷歌字体中提取“lato”

    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    

    那么只会拉入默认字体粗细 (400)。为了包含不同的字体粗细(例如 300),您需要像这样将其添加到链接中

    <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
    

    请注意,现在它将拉入 300 和 400 的字体文件。

    如果您使用的是自己的字体文件,而不是 google 字体,您需要自己包含 300 的字体样式表。

    【讨论】:

      【解决方案3】:

      这是一个包含除斜体变体之外的所有权重的示例:

      body {
        font-family: 'Lato', sans-serif;
      }
      .light {
        font-weight: 300;
      }
      .regular {
        font-weight: 400;
      }
      .bold {
        font-weight: 700;
      }
      .black {
        font-weight: 900;
      }
      <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
      <p class="light">weight 300</p>
      <p class="regular">weight 400</p>
      <p class="bold">weight 700</p>
      <p class="black">weight 900</p>

      【讨论】:

        猜你喜欢
        • 2016-01-31
        • 2017-09-27
        • 1970-01-01
        • 2015-11-14
        • 1970-01-01
        • 1970-01-01
        • 2017-01-20
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多