How to use the computer modern font in webpages?

后端未结

关注

 6  956

慢半拍i

I never see Computer Modern font, the one shipped as default for LaTeX type setting system, on any webpage.

How to change the CSS so that font will actually wor

相关标签:

6条回答

感情败类

2021-01-30 02:56
```
@font-face {
font-family: "Computer Modern ";
src: url(ace.ttf);
}
```
.cm { font-family: "Computer Modern"; }

You do need to have a ttf file for that font.
0 讨论(0)
发布评论:

提交评论
- 加载中...
不思量自难忘°

2021-01-30 03:07

you cannot, up until CSS 2.1 you can only use the fonts that are ACTUALLY installed on the client's computer. In CSS 3 there are some ways to embed fonts in your webpage but those ways are not greatly supported by browsers yet. Have a look here: http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm

0 讨论(0)
发布评论:

提交评论
- 加载中...
无人及你

2021-01-30 03:09
Nowadays you can download everything you need (font files and css) from this webpage:

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

Then the only thing you need to do is to add the corresponding css files to the header section of your html file like:
```
<head>
    <meta charset="UTF-8" />
    <title>Test</title>
    
    <link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
    ...
</head>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

甜味超标

2021-01-30 03:11

Using the Computer Modern font in webpages has become very easy! Just paste the following lines of CSS code in the head section of your html code in order to activate the sans-serif version of that font.

<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>

Note that the solution here makes the browser load the current version of the fonts from a CTAN mirror, which can be very slow. This is okay for testing purposes, but in the long run I'd recommend you download these .otf files to your own webserver.

0 讨论(0)

一整个雨季

2021-01-30 03:11
You can just insert the https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css-stylesheet into your html header. Like this:
```
<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>
```
You can use the font for production websites with any amount of traffic. Files are served via MaxCDN's super fast global CDN. There is no traffic limits or throttling.

The README.md on Github
0 讨论(0)
发布评论:

提交评论
- 加载中...
栀梦

2021-01-30 03:17
Just for anyone in 2020 still looking for the optimised web fonts rather than the larger .otf fonts which are used in the answers above, I've hosted the Computer Modern font family via the jsDelivr CDN.

To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:

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

Example Code:
```
<head>
  
  <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>
```
Check out the documentation here
0 讨论(0)
发布评论:

提交评论
- 加载中...