如何使用 font-family lato？ [关闭]答案

【问题标题】：How to use font-family lato? [closed]如何使用 font-family lato？ [关闭]
【发布时间】：2014-03-03 00:51:24
【问题描述】：

如何使用 font-family lato ？

我用过这样的风格，但没用。我能怎么做？谢谢。

font-family: Lato, Helvetica, sans-serif;

链接：http://www.google.com/fonts/specimen/Lato

【问题讨论】：

这个字体是否存在于 C 盘的你的 Fonts 文件夹中？
您需要的所有信息都在this font 的 Google 字体页面上提供。您可能需要向下滚动一下。
@MikeW，+1，这应该是一个答案。
你可以下载它我可以告诉你如何在你的网站上安装'
检查我的 (@user2727841) 更新答案...

标签： css font-family google-font-api

【解决方案1】：

请把这段代码放在head部分

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

并在您的 CSS 中使用 font-family: 'Lato', sans-serif;。例如：

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

或者你也可以手动使用

从fontSquiral生成.ttf字体

可以试试这个选项

    @font-face {
        font-family: "Lato";
        src: url('698242188-Lato-Bla.eot');
        src: url('698242188-Lato-Bla.eot?#iefix') format('embedded-opentype'),
        url('698242188-Lato-Bla.svg#Lato Black') format('svg'),
        url('698242188-Lato-Bla.woff') format('woff'),
        url('698242188-Lato-Bla.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

这样称呼

body {
  font-family: 'Lato', sans-serif;
}

【讨论】：

是的，你可以从这里选择字体系列prntscr.com/83rkv9
我尝试了很多方法，但是一旦我添加了“无衬线”部分，它就起作用了......
是的，它的无衬线字体所以我们需要使用
如果这适用于除 Chrome 之外的所有浏览器，请将 http 更改为 https。
我知道这是一个非常古老的答案，但请考虑将 http:// 更改为 https://，因为安全页面不会从不安全的 html 加载字体。

【解决方案2】：

从here下载它并解压LatoOFL.rar然后去TTF打开这个font-face-generator点击Choose File选择你想要使用的字体然后点击生成然后下载它然后去html文件打开它，你会看到这样的代码

@font-face {
        font-family: "Lato Black";
        src: url('698242188-Lato-Bla.eot');
        src: url('698242188-Lato-Bla.eot?#iefix') format('embedded-opentype'),
        url('698242188-Lato-Bla.svg#Lato Black') format('svg'),
        url('698242188-Lato-Bla.woff') format('woff'),
        url('698242188-Lato-Bla.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
body{
    font-family: "Lato Black";
    direction: ltr;
}

更改 src 代码并提供您放置此字体目录的 url，现在您可以在您的网站上使用它...

如果你不想下载，请使用这个

<link type='text/css' href='http://fonts.googleapis.com/css?family=Lato:400,700' />

【讨论】：

不，我想在我的网站上使用。