如何在網頁中使用計算機現代字體？

我從來沒有在任何網頁上看到Computer Modern字體，這是默認的LaTeX類型設置系統。如何在網頁中使用計算機現代字體？

如何更改CSS使字體實際上工作？

2011-06-25 Chao Xu

我還沒有聽說過使用LaTeX進行排版的瀏覽器。 – BoltClock

在網頁中使用Computer Modern字體變得非常簡單！只需將以下幾行CSS代碼粘貼到您的html代碼的頭部分即可激活該字體的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推薦給您自己的網絡服務器。

來源

2012-02-15 00:33:11 Holger

非常好，Holger，我能夠做到這一點。還有一件好事，就是將[Font Squirrel font-face generator]（http://www.fontsquirrel.com/fontface/generator）從2.2Mb壓縮到291Kb。現在我可以讓他們在網站上！ :) 此外，不要忘記從[sf cm-unicode項目]（http://cm-unicode.sourceforge.net/download.html）獲取.ttf，而不是.otf。 – lucasarruda

雖然我的答案被接受，但這個答案是（更）正確的。保羅·愛爾蘭也有一篇有趣的文章：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – Ben

這應該是被接受的答案。 – jupp0r

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

.cm font-family：「Computer Modern」; }

您確實需要爲該字體設置一個ttf文件。

來源

2011-06-25 06:59:44

「ace.ttf」不是Computer Modern字體。看到我對這個問題的回答。 – Holger

你不能，直到CSS 2.1，你只能使用客戶端計算機上實際安裝的字體。在CSS 3中，可以通過一些方法在網頁中嵌入字體，但這些方式還沒有得到瀏覽器的大力支持。看看這裏：http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm

來源

2011-06-25 07:00:02 Bazzz

現在，你可以下載你需要從這個網頁的一切（字體文件和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>

來源

2014-11-08 13:23:14 asmaier

你可以插入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

來源

2015-10-07 22:28:12 dreampulse

如何在網頁中使用計算機現代字體？

回答

相關問題