任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但 none 有效

Question

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

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 doesn't work at all but this service https://fontie.pixelsvsbytes.com 仅适用于 NotoSerifLao-Regular (the first one)，但不适用于 NotoSerifLao-SemiBold (the second one)。我不明白为什么它不适用于第二个，而是第一个。我的电脑里有这两种字体，它们在 MS Office 中都可以正常工作。

我将 generated/converted 字体放置在子主题中，如下所示：

              -----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 生成器网站，请告诉我。但是我已经尝试了几乎所有在Google、none中找到的作品。我通过 Dropbox 共享字体。您可以下载并测试它们。

Answer 1

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

Google 字体

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

这里有一些例子。我在这里使用 @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;
}

工作版本

Google 字体

这个只用正体和粗体，没有斜体。但是您可以设置 @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>

Answer 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>

任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但 none 有效

Can anybody get these two fonts work as Webfont? I use almost webfont generator services but none works

webfonts

Google 字体

自托管

工作版本

Google 字体

自托管