工作版本

Question

我已多次尝试将这两种字体生成或转换为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

此webfont生成器服务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分享了这些字体。您可以下载并测试它们。

Answer 1

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

Google字体

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

以下是一些例子。我在这里使用@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');

自托管

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

@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指令以引入项目所需的任何内容。请注意只加载您需要的内容，因为许多字体文件会降低您的网站速度。

＆＃13;

@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; }

＆＃13;

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

＆＃13;

自托管

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我已经为此做了一些工作，我发现了一些事情。

看起来你使用的unicode系列是错误的。老挝字符的unicode范围为0E80-0EFF。
某些字体转换器喜欢删除非拉丁字符，因此也可能导致一些问题。您需要确保没有子集，或者您已在子集中指定了老挝字符。我使用FontSquirrel转换了这些并选择了Expert选项而没有子集。 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生成器服务但没有工作

2 个答案:

Google字体

自托管

工作版本

Google字体

自托管