Hol*_*ger 56
在网页中使用计算机现代字体变得非常容易!只需在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文件下载到您自己的网络服务器.
您可以将https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.csscss-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 提供服务。没有流量限制或节流。
现在,您可以从此网页下载所需的一切(字体文件和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>
对于 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>