Как настроить шрифт для цифр?

Question

[ayapergenov]

Нужно настроить шрифт для отображения цифр 404 с помощью шрифта NBEmulator.

Нужно чтобы выглядело так:

Выглядит так: codepen.io/mathetes/pen/BNRzGa
Прилагаю шрифт

Answer 1

[Евгений Одинец]

htmlbook.ru/css/font-face

Answer 2

[Евгений Петров]

Пора бы вам прочесть про @font-face.
Вот ваш пример со шрифтом, включающим только цифры, и квазивнутренней тенью.

Примечание: Учтите, что цвет первой и последней теней должен соответствовать фону.

.error {
	...
	color: rgba(0, 51, 153, 0.8);
	text-shadow: 6px 9px 6px #fff, 0 0 0 #000, 6px 9px 6px #fff;
}

При этом, с учётом того, что тени с этим цветом налагаются на частично непрозрачный цвет шрифта, сквозь которого просвечивает тот же самый цвет фона, конечный вариант нужно внимательно тестировать.
Для белого фона всё гораздо проще, но и тут нужно проверять конечный результат.

И не используйте реальные единицы для media:screen — да-да, я про pt.

Comments

[ayapergenov]

Прочитал. не помогает чавото

[ayapergenov]

@font-face {
font-family: 'BNEmulator';
src: url('fonts/BNEmulator/emulator.eot');
src: url('fonts/BNEmulator/emulator.eot') format('embedded-opentype'),
url('fonts/BNEmulator/emulator.woff') format('woff'),
url('fonts/BNEmulator/emulator.ttf') format('truetype'),
url('fonts/BNEmulator/emulator.svg#BNEmulator') format('svg');
font-weight: normal;
font-style: normal;
}

[ayapergenov]

Когда смотрю этот шрифт программе то на русском он смотрится обычно, а на латинице получается такой квадратичный

[Котик Антон]

ayapergenov: Кириллицу шрифт не поддерживает www.dafont.com/bn-emulator.font

[ayapergenov]

27cm: Мне не важно, главное, чтобы корректно отображался. При чем для цифр, одинаково правильно отображается в программе как в латинице так и в кириллице. А в браузере увы...

[Евгений Петров]

ayapergenov: Выложил ваш пример. Из шрифта вырезал всё, кроме цифр.

[ayapergenov]

Разобрался. Проблема в пути к шрифтам. Надо было прописать путь с выходом из папки ../fonts/
Все заработало. Спасибо.
Доп. вопрос как сделать затемняющую внутреннюю тень на шрифте сверху и справа?

[Roman]

Евгений Петров: Как вырезать из шрифта то что не нужно? Можно оставить только несколько знаков?

[Евгений Петров]

Roman: На fontsquirrel.com при генерации шрифта заходите в режим эксперта и выбираете custom subsetting. Ну, или в любом шрифтовом редакторе.

[Евгений Петров]

ayapergenov: Почитайте комментарии к статье habrahabr.ru/post/154211

[ayapergenov]

Спасибо!

[Евгений Петров]

ayapergenov: Обновил для вас пример. Теперь он с тенью.

[ayapergenov]

Евгений Петров: При наложении теней меняется основной цвет. Как определить точный цвет в rgba, чтобы с тенями он соответствовал hex #2d5b89