我应该如何为我的网站添加对晦涩字母的支持?
How should I add support for obscure alphabets to my website?
问题
我为自己创建了一个网站,使用 NodeJS 的 Express 框架,它的工作原理与我希望的一样。
剩下的一个恼人问题是如何最好地支持世界必须提供的更晦涩的文字和字母表。
目前,我正在使用 Computer Modern 字体的一个版本,具体使用 these files,我在以下代码中通过 CSS 导入:
@font-face {
font-family: computerModern;
src: url("fonts/cmunrm.ttf");
}
@font-face {
font-family: computerModern;
src: url("fonts/cmunti.ttf");
font-style: italic;
}
@font-face {
font-family: computerModern;
src: url("fonts/cmunbx.ttf");
font-weight: bold;
}
@font-face {
font-family: computerModern;
src: url("fonts/cmunbi.ttf");
font-weight: bold;
font-style: italic;
}
...
body {
font-family: computerModern, serif;
padding-left: 20px;
padding-right: 20px;
}
到目前为止,这种方法在一定程度上效果很好。拉丁字母印刷精美,希腊字母和西里尔字母也是如此。阿拉伯文本看起来也很漂亮,尽管通过 .ttf 文件的字符列表,我的浏览器一定只是提取了它的默认阿拉伯字体;幸运的是,默认的 Arabic 字体很好地补充了 Computer Modern。但是当我想打印时,我开始 运行 遇到更严重的困难,例如,用他们的母语 格鲁吉亚字符 打印人名,例如სალომე ზურაბიშვილი = Salome Zourabichvili。正确的字符 是 打印的,但是当我的浏览器的默认格鲁吉亚字体与 Computer Modern 并排时是丑陋的。
潜在的解决方案
我应该如何添加对格鲁吉亚字母和其他晦涩脚本的支持,以便以与我网站其余部分的审美相吻合的字体打印字符?我可以想到四种可能的解决方案,其中两种我知道如何实现但不令人满意,另两种我不知道如何实现。
已知但不令人满意的解决方案
- 用涵盖所有所需字符的文件替换当前的 .ttf 文件。 不满意,因为我找不到这样的文件。
- 为每个晦涩的字母表创建
span
class 的新 HTML 标签,在这样的标签中包装该字母表的任何文本。 不满意,因为网站有几千页,一直在添加新的,不要相信自己,更不要说任何人,记得使用合适的标签。
我不知道如何实施的解决方案
- 拼接.tff文件,即将字符从a.ttf复制到b.ttf.
- 将多个 .ttf 文件中的字符添加到 一个 CSS
font-family
,并与 相同 font-style
, font-weight
, 等等
为什么不以 html 语言为目标并在需要时为每种语言加载不同的字体?
示例:
html[lang=ja]>body {
font-family: 'Yu Gothic', Arial, Helvetica, sans-serif;
}
html[lang=ko]>body {
font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
}
html[lang=zh]>body {
font-family: 'Noto Serif SC', Courier, Georgia, serif;
}
此致
问题
我为自己创建了一个网站,使用 NodeJS 的 Express 框架,它的工作原理与我希望的一样。
剩下的一个恼人问题是如何最好地支持世界必须提供的更晦涩的文字和字母表。
目前,我正在使用 Computer Modern 字体的一个版本,具体使用 these files,我在以下代码中通过 CSS 导入:
@font-face {
font-family: computerModern;
src: url("fonts/cmunrm.ttf");
}
@font-face {
font-family: computerModern;
src: url("fonts/cmunti.ttf");
font-style: italic;
}
@font-face {
font-family: computerModern;
src: url("fonts/cmunbx.ttf");
font-weight: bold;
}
@font-face {
font-family: computerModern;
src: url("fonts/cmunbi.ttf");
font-weight: bold;
font-style: italic;
}
...
body {
font-family: computerModern, serif;
padding-left: 20px;
padding-right: 20px;
}
到目前为止,这种方法在一定程度上效果很好。拉丁字母印刷精美,希腊字母和西里尔字母也是如此。阿拉伯文本看起来也很漂亮,尽管通过 .ttf 文件的字符列表,我的浏览器一定只是提取了它的默认阿拉伯字体;幸运的是,默认的 Arabic 字体很好地补充了 Computer Modern。但是当我想打印时,我开始 运行 遇到更严重的困难,例如,用他们的母语 格鲁吉亚字符 打印人名,例如სალომე ზურაბიშვილი = Salome Zourabichvili。正确的字符 是 打印的,但是当我的浏览器的默认格鲁吉亚字体与 Computer Modern 并排时是丑陋的。
潜在的解决方案
我应该如何添加对格鲁吉亚字母和其他晦涩脚本的支持,以便以与我网站其余部分的审美相吻合的字体打印字符?我可以想到四种可能的解决方案,其中两种我知道如何实现但不令人满意,另两种我不知道如何实现。
已知但不令人满意的解决方案
- 用涵盖所有所需字符的文件替换当前的 .ttf 文件。 不满意,因为我找不到这样的文件。
- 为每个晦涩的字母表创建
span
class 的新 HTML 标签,在这样的标签中包装该字母表的任何文本。 不满意,因为网站有几千页,一直在添加新的,不要相信自己,更不要说任何人,记得使用合适的标签。
我不知道如何实施的解决方案
- 拼接.tff文件,即将字符从a.ttf复制到b.ttf.
- 将多个 .ttf 文件中的字符添加到 一个 CSS
font-family
,并与 相同font-style
,font-weight
, 等等
为什么不以 html 语言为目标并在需要时为每种语言加载不同的字体?
示例:
html[lang=ja]>body {
font-family: 'Yu Gothic', Arial, Helvetica, sans-serif;
}
html[lang=ko]>body {
font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
}
html[lang=zh]>body {
font-family: 'Noto Serif SC', Courier, Georgia, serif;
}
此致