如何在网页中使用电脑现代字体？答案

【问题标题】：How to use the computer modern font in webpages?如何在网页中使用电脑现代字体？
【发布时间】：2011-09-22 12:16:38
【问题描述】：

我从来没有在任何网页上看到过 Computer Modern 字体，这是 LaTeX 字体设置系统的默认字体。

如何更改 CSS 以使字体真正正常工作？

【问题讨论】：

我没有听说过使用LaTeX进行排版的浏览器。

【解决方案1】：

在网页中使用 Computer Modern 字体变得非常简单！只需将以下几行 CSS 代码粘贴到 html 代码的 head 部分，即可激活该字体的 sans-serif 版本。

<style type="text/css">
  @font-face {
    font-family: "Computer Modern";
    src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
    font-weight: bold;
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
    font-style: italic, oblique;
  }
  @font-face {
    font-family: "Computer Modern";
    src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
    font-weight: bold;
    font-style: italic, oblique;
  }

  body {
    font-family: "Computer Modern", sans-serif;
  }
</style>

请注意，此处的解决方案使浏览器从 CTAN 镜像加载当前版本的字体，这可能会非常慢。这可以用于测试目的，但从长远来看，我建议您将这些 .otf 文件 download 发送到您自己的网络服务器。

【讨论】：

非常好，Holger，我能做到。还有一件好事，那就是去Font Squirrel font-face generator 并将它们从 2.2Mb 压缩到 291Kb。现在我可以拥有他们的网站了！ :) 另外，不要忘记从sf cm-unicode project 获取.ttf，而不是.otf。
虽然我的回答被接受了，但这个回答（更多）是正确的。 Paul Irish 也有一篇关于此的有趣文章：paulirish.com/2009/bulletproof-font-face-implementation-syntax
衬线变体怎么样？如果有人解释文件名的首字母缩写词会很好
@gigabytes 顺便说一句，如果您想真正了解文件名，请查看 ctan.org/tex-archive/fonts 并深入了解原始 Knuth Computer Modern 元字体文件 (. mf)，每个元字体文件在文件顶部都有一个 ascii 描述，说明其中的内容。例如 cmb10.mf 是 Computer Modern Bold Roman 10 点
千兆字节如果你想要衬线，从这样的东西开始 @font-face { font-family: 'cmunserif'; src: url('mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrm.otf');字体粗细：正常；字体样式：正常； } 正文 { 字体系列：'cmunserif'; } 你可以在下面查看 asmaier 的答案链接以获取更多信息

【解决方案2】：

您可以将 https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css-stylesheet 插入到您的 html 标头中。像这样：

<head>
  <!-- ... -->

  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
  <style>
    body {
      font-family: "Computer Modern Sans", sans-serif;
    }
  </style>
</head>

您可以将该字体用于具有任意流量的生产网站。文件通过 MaxCDN 的超快速全球 CDN 提供。没有流量限制或节流。

The README.md on Github

【讨论】：

【解决方案3】：

现在你可以从这个网页下载你需要的所有东西（字体文件和 css）：

http://checkmyworking.com/cm-web-fonts/

那么您唯一需要做的就是将相应的 css 文件添加到您的 html 文件的 header 部分，例如：

<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- Computer Modern Serif-->
    <link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
    ...
</head>

【讨论】：

【解决方案4】：

仅针对 2020 年及以后仍在寻找优化的网络字体而不是上述答案中使用的较大的 .otf 字体的任何人，我已经通过 jsDelivr CDN 托管了 Computer Modern 字体系列。

要使用它，你可以在你的html中添加一个<link><head>，它通过以下地址请求优化字体：

https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css

示例代码：

<head>
  <!-- Other imports... -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/fonts.css">
  <style>
    body {
      font-family: "Computer Modern Serif", serif;
    }
  </style>
</head>

查看documentation here

【讨论】：

这真是太棒了！

【解决方案5】：

您不能，在 CSS 2.1 之前，您只能使用实际安装在客户端计算机上的字体。在 CSS 3 中，有一些方法可以在您的网页中嵌入字体，但浏览器还不太支持这些方法。看看这里：http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm

【讨论】：

【解决方案6】：

@font-face {
font-family: "Computer Modern ";
src: url(ace.ttf);
}

.cm { 字体家族：“现代计算机”； }

您确实需要有该字体的 ttf 文件。

【讨论】：

"ace.ttf" 不是 Computer Modern 字体。请参阅我对这个问题的回答。