任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但没有一个有效
Posted
技术标签:
【中文标题】任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但没有一个有效【英文标题】：Can anybody get these two fonts work as Webfont? I use almost webfont generator services but none works 【发布时间】：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 共享了字体。您可以下载并测试它们。
【问题讨论】：
【参考方案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>【讨论】：
以上是关于任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但没有一个有效的主要内容，如果未能解决你的问题，请参考以下文章
问题&解决fonts/fontawesome-webfont.woff2 404 (Not Found)
凯尔特字体 - eot, woff, ttf - webfont