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

rkttyhzu 于 2023-06-25 发布在其他

关注(0)|答案(7)|浏览(137)

我从来没有看到计算机现代字体，一个作为默认的LaTeX类型设置系统，在任何网页上。
如何改变CSS，使字体“实际上”工作？

css

来源：https://stackoverflow.com/questions/6476351/how-to-use-the-computer-modern-font-in-webpages

7条答案

按热度按时间

oo7oh9g91#

在网页中使用Computer Modern字体变得非常容易！只需将以下几行CSS代码粘贴到html代码的头部，即可激活该字体的无衬线版本。

<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到您自己的Web服务器。

赞(0）回复(0）举报 2023-06-25

qmelpv7a2#

您可以将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

赞(0）回复(0）举报 2023-06-25

z4bn682m3#

对于任何在2020年及以后仍然在寻找优化的网页字体而不是上面答案中使用的更大的.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

赞(0）回复(0）举报 2023-06-25

os8fio9y4#

现在你可以从这个网页下载你需要的一切（字体文件和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>

赞(0）回复(0）举报 2023-06-25

r6vfmomb5#

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

赞(0）回复(0）举报 2023-06-25

4szc88ey6#

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

.cm { font-family：《计算机现代》;}
你需要有一个ttf文件的字体。

赞(0）回复(0）举报 2023-06-25

wz1wpwve7#

如果您的网站使用KaTeX renderer，那么您可以简单地用途：

body {
  font-family: "KaTeX_Main";
}

在KaTeX包中还有其他拉丁现代字体，您可以在这里找到。

赞(0）回复(0）举报 2023-06-25

我来回答

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

7条答案

相关问题

热门标签

最新问答