Как использовать современный шрифт компьютера на веб-страницах?

Я никогда не вижу шрифт Computer Modern, тот, который отправлен по умолчанию для системы настройки типа LaTeX, на любую веб-страницу.

Как изменить CSS, чтобы шрифт действительно работал?

Ответ 1

Использование шрифта 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, что может быть очень медленным. Это нормально для тестирования, но в конечном итоге я рекомендую вам download эти .otf файлы на ваш собственный веб-сервер.

Ответ 2

В настоящее время вы можете загрузить все, что вам нужно (файлы шрифтов и 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>

Ответ 3

вы не можете, до CSS 2.1 вы можете использовать только шрифты, которые на самом деле установлены на клиентском компьютере. В CSS 3 есть несколько способов встраивания шрифтов на вашу веб-страницу, но эти способы пока не поддерживаются браузерами. Посмотрите здесь: http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm

Ответ 4

Вы можете просто вставить таблицу стилей 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>

Вы можете использовать шрифт для производственных сайтов с любым количеством трафика. Файлы подаются с помощью суперскоростного глобального CDN MaxCDN. Нет ограничений движения или дросселирования.

README.md на Github

Ответ 5

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

.cm { font-family: "Computer Modern"; }

Вам нужен файл ttf для этого шрифта.