css - 如何使用xhtml在css中使用roboto字体

Question

我使用的是 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到我的代码。我想通过除 Web 链接之外的 .CSS 和 XHTML 文件添加它。

Answer 1

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

标准

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

@导入

@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) 有用。