如何使用xhtml在css中使用roboto字体答案

【问题标题】：how to use roboto font in css using xhtml如何使用xhtml在css中使用roboto字体
【发布时间】：2015-07-16 07:19:34
【问题描述】：

我使用过 xhtml、jsf 和 primefaces。我在 css 文件中提到了我的样式。我想在我的项目中添加roboto字体。所以我尝试添加字体并得到了一些解决方案，比如在 XHTML 中添加以下行

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

但我不想将这一行 http://fonts.googleapis.com/css添加到我的代码中。我想通过 .CSS 和 XHTML 文件添加它，除了 web 链接。

【问题讨论】：

不确定是什么问题。如果你想使用 CSS，你必须包含 <link> 元素，那么还有什么？或者你根本不想要任何<link> 元素，只是一个<style> 块？然后只需在<style> 中添加一个@import。如果你希望你可以通过内联样式属性做到这一点，那么你就不走运了。
啊，这是您要避免的 Google API；这个问题不是很清楚；看了你的另一篇我才明白。

标签： css html primefaces fonts xhtml

【解决方案1】：

Google Fonts 提供了三种不同的字体嵌入方式，所有这些方式都在其“快速使用”页面上进行了明确描述：

标准

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

@import

@import url(http://fonts.googleapis.com/css?family=Roboto);

JavaScript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

这些是包含它们的唯一方法 - 或任何网络字体。

你可以为字体文件使用数据 URI

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(data:application/octet-stream;charset=utf-8;base64,<YOUR_BASE_64_ENCODED_FILES_SOURCE>) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

但我们非常不鼓励这样做，因为它会给您的页面增加不必要的膨胀。另外，我不确定这种方法对您的预期好处是什么。它通常只对非常小的二进制文件（~1-2k）有用。

【讨论】：