如何在网页中使用计算机现代字体?

时间:2011-06-25 06:53:22

标签: css fonts

我从未在任何网页上看到Computer Modern字体,这是LaTeX类型设置系统的默认字体。

如何更改CSS以使字体实际工作?

6 个答案:

答案 0 :(得分:55)

使用计算机现代字体在网页中变得非常容易!只需在html代码的head部分粘贴以下CSS代码行,即可激活该字体的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发送到您自己的网络服务器。

答案 1 :(得分:6)

现在您可以从此网页下载所需的一切(字体文件和CSS):

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

然后您唯一需要做的就是将相应的css文件添加到html文件的标题部分,如:

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

答案 2 :(得分:3)

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

答案 3 :(得分:2)

您只需将https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css样式表插入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

答案 4 :(得分:1)

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

.cm {     font-family:“计算机现代”;     }

你需要有一个该字体的ttf文件。

答案 5 :(得分:1)

对于2020年仍在寻找优化的Web字体而不是上面的答案中使用较大的.otf字体的人,我已经通过jsDelivr CDN托管了Computer Modern字体家族。

要使用它,可以将<link>添加到html <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