【问题标题】：Can anybody get these two fonts work as Webfont? I use almost webfont generator services but none works任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但没有一个有效
【发布时间】：2018-07-07 18:24:43
【问题描述】：

我曾多次尝试将这两种字体生成或转换为 webfont，但它们都不起作用。我尝试了几乎在 Google 搜索结果中找到的 webfont 服务，但没有一个有效。以下是字体：

1) NotoSerifLao-Regular https://www.dropbox.com/s/a4e5jfwy5umlj41/NotoSerifLao-Regular.ttf?dl=0
2) NotoSerifLao-SemiBold https://www.dropbox.com/s/2x84v1acibga5iu/NotoSerifLao-SemiBold.ttf?dl=0

此网络字体生成器服务https://www.fontsquirrel.com 根本不起作用，但此服务https://fontie.pixelsvsbytes.com 仅适用于NotoSerifLao-Regular (the first one)，但不适用于NotoSerifLao-SemiBold (the second one)。我不明白为什么它不适用于第二个，但第一个。我的电脑里有这两种字体，它们都可以在 MS Office 中正常工作。

我将生成/转换后的字体放在这样的子主题中：

              -----fonts (folder)
  child-theme}  
              -----css  (folder)

所以我的css中的路径是这样的：

   @font-face {
    font-family:'Noto Serif Lao';
    src: url('fonts/Noto Serif Lao Regular.eot');
    src: url('fonts/Noto Serif Lao Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Noto Serif Lao Regular.woff2') format('woff2'),
        url('fonts/Noto Serif Lao Regular.woff') format('woff'),
        url('fonts/Noto Serif Lao Regular.ttf') format('truetype'),
        url('fonts/Noto Serif Lao Regular.svg#Noto Serif Lao Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00A0;
}

上面的代码是这个服务fontie.pixelsvsbytes.com生成的第一个字体的例子。它有效。正如我所说，该网站仅适用于第一种字体，而不适用于第二种字体。路径相同且正确。在 chrome 中没有发现错误。我尝试过其他 webfont 生成器服务，但它们根本不起作用。你能告诉我如何让这两种字体像 webfont 一样工作吗？或者，如果您知道其他 webfont 生成器网站，请告诉我。但我已经尝试了几乎所有在谷歌中找到的东西，没有一个有效。我已经通过 Dropbox 共享了字体。您可以下载并测试它们。

【问题讨论】：

标签： webfonts

【解决方案1】：

对于 webfonts（实际上是一般的任何字体），粗体、斜体和其他变体实际上是需要加载的单独文件。因此，如果您使用常规、粗体、斜体和粗斜体，则需要加载四个单独的文件。

谷歌字体

就像自托管一样，您必须明确告诉 Google 字体以获得您想要的所有权重和变体。您可以在获得嵌入代码的小框中执行此操作。单击“自定义”选项卡，然后选择所需的变体。

这里有一些例子。我在这里使用@import 选项，您只需将其放入样式表中，但标准link 标记的模式相同。

默认只包含常规权重：

@import url('https://fonts.googleapis.com/css?family=Noto+Serif');

如果你想要规则和粗体，它看起来像这样：

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');

如果你想要这两个都用斜体，你也可以添加它们：

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i');

自托管

在您上面的代码中，在我看来您需要定义半粗体字体。如果上面的 CSS 是完整的，它只定义了常规的权重。半粗体版本的路径需要在另一个 @font-face 指令中定义，字体粗细设置不同。它应该看起来像这样：

@font-face {
    font-family:'Noto Serif Lao';
    src: url('fonts/Noto Serif Lao Regular.eot');
    src: url('fonts/Noto Serif Lao Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Noto Serif Lao Regular.woff2') format('woff2'),
        url('fonts/Noto Serif Lao Regular.woff') format('woff'),
        url('fonts/Noto Serif Lao Regular.ttf') format('truetype'),
        url('fonts/Noto Serif Lao Regular.svg#Noto Serif Lao Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family:'Noto Serif Lao';
    src: url('fonts/Noto Serif Lao Semibold.eot');
    src: url('fonts/Noto Serif Lao Semibold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Noto Serif Lao Semibold.woff2') format('woff2'),
        url('fonts/Noto Serif Lao Semibold.woff') format('woff'),
        url('fonts/Noto Serif Lao Semibold.ttf') format('truetype'),
        url('fonts/Noto Serif Lao Semibold.svg#Noto Serif Lao Semibold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}

工作版本

谷歌字体

这个只使用常规和粗体，没有斜体。但是您可以设置@import 指令来引入项目所需的任何内容。请注意只加载您需要的内容，因为大量字体文件会降低您的网站速度。

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
@import url(//fonts.googleapis.com/earlyaccess/notosanslao.css);
@import url(//fonts.googleapis.com/earlyaccess/notoseriflao.css);

h1 { font-family: sans-serif; margin: 0; }
h1.noto { font-family: 'Noto Serif', sans-serif; font-weight: 400; }
h1.bold { font-weight: 700; }
h1.lao { font-family: 'Noto Serif Lao'; font-weight: 400; }
h1.lao-bold { font-family: 'Noto Serif Lao'; font-weight: 700; }
h1.sans-lao { font-family: 'Noto Sans Lao'; font-weight: 400; }
h1.sans-lao-bold { font-family: 'Noto Sans Lao'; font-weight: 700; }

<h1 class="lao">ຕົວອັກສອນລາວ</h1>
<h1 class="lao-bold">ຕົວອັກສອນລາວ</h1>
<h1 class="sans-lao">ຕົວອັກສອນລາວ</h1>
<h1 class="sans-lao-bold">ຕົວອັກສອນລາວ</h1>
<h1 class="noto">Noto Serif Lao</h1>
<h1 class="noto bold">Noto Serif Lao Semibold</h1>

自托管

对于自托管，我只指定了 TTF 版本，因为这就是您在上面提供的。我只是在这个演示中使用了 Dropbox 链接，但您可以将它们换成您的特定路径。如果您想包含其他字体格式（.woff、.svg 等），您需要确保为所有这些字体格式（无论是两种粗细）都有单独的文件。

font-face {
    font-family:'Noto Serif Lao';
    src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff2') format('woff2'),
         url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0E80-0EFF;
}

@font-face {
    font-family:'Noto Serif Lao';
    src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff2') format('woff2'),
         url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0E80-0EFF;
}

.lao {
  font-family: 'Noto Serif Lao';
  font-weight: 400;
}
.lao-bold {
  font-family: 'Noto Serif Lao';
  font-weight: 700;
}

<h1>No font: ຕົວອັກສອນລາວ</h1>
<h1 class="lao">Regular: ຕົວອັກສອນລາວ</h1>
<h1 class="lao-bold">Bold: ຕົວອັກສອນລາວ</h1>

【讨论】：

感谢您的意见。我已经做到了，但仍然无法正常工作。
我不使用谷歌字体，只是从谷歌搜索结果中找到的webfont服务网站生成的webfont。
您的 /fonts 文件夹是什么样的？如果没有粗体字体或者我输入了错误的路径，它将无法工作。
1) 我将这两种字体的所有生成文件放在同一个文件夹中，如“子主题/字体”2) 我什至尝试将字体放在单独的文件夹中，如“子主题/字体/常规”和“子主题/字体/半粗体”。所以我把路径写成这样 src: url('fonts/regular/Noto Serif Lao regular.eot) 和 src: url('fonts/semibold/Noto Serif Lao semibold.eot)。还是不行。
但是，建议您测试身边的字体，以便了解会发生什么。如果它有效，请告诉我您如何将字体文件放入文件夹以及 css 代码的外观。我做了很多事情，但没有工作。非常感谢。

【解决方案2】：

我在这方面做了更多工作，发现了一些东西。

您使用的 unicode 范围似乎有误。老挝语字符的 unicode 范围为 0E80-0EFF。
一些字体转换器喜欢去除非拉丁字符，因此这也可能导致一些问题。您需要确保没有子集，或者您已在子集中指定了老挝字符。我用 FontSquirrel 转换了这些，并选择了没有子集的专家选项。 A similar issue was discussed in this question.

看起来可能仍然存在一些间距问题，但你会更好地判断这一点。

@font-face {
  font-family: 'Noto Serif Lao';
  src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff2') format('woff2'), 
       url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0E80-0EFF;
}

@font-face {
  font-family: 'Noto Serif Lao';
  src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff2') format('woff2'), 
       url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0E80-0EFF;
}

.lao {
  font-family: 'Noto Serif Lao', sans-serif;
  font-weight: 400;
}

.lao-bold {
  font-family: 'Noto Serif Lao', sans-serif;
  font-weight: 700;
}

<h1 class="lao">Regular: ຕົວອັກສອນລາວ</h1>
<h1 class="lao-bold">Bold: ຕົວອັກສອນລາວ</h1>

【讨论】：