Разработка страницы для экрана и печатных носителей - размер шрифта - PullRequest
Новая
       2

Разработка страницы для экрана и печатных носителей - размер шрифта

2 голосов
/ 12 июля 2011

Я создал отчет, который отображается на экране и должен быть напечатан. Приложение также должно поддерживать IE 6.0.

Какие размеры шрифта я должен использовать?

Я прочитал, я должен использовать em для экранных носителей (веб-страница) и pt для печатных носителей (я знаю, что em масштабируемый, а pt нет ...).

Как бы вы создали такую ​​страницу с точки зрения элементов CSS?

например. создать отдельный файл CSS для печатных СМИ и продублировать там все ваши классы CSS и просто изменить размер шрифта? столько дублирования.

Нет лучшего способа?

Спасибо

Ответы [ 2 ]

1 голос
/ 12 июля 2011

Если у вас первая таблица стилей помечена как media all, а вторая таблица стилей предназначена для печати на носителе, вторая таблица стилей будет фактически расширением и переопределением первой для печатных носителей. Предпочтительные точки для печати и ems для экрана.

Посмотрите эту статью, чтобы узнать о других вещах, о которых вы могли и не подумать.

http://www.alistapart.com/articles/goingtoprint/

1 голос
/ 12 июля 2011

Вам не нужно много копировать.

Создайте свой отчет для Интернета.

Затем в теле таблицы стилей добавьте ссылку на стили печати, например, 

@media print {
div#content {background:#fff; width:90%; font-family:serif; font-size:12px;}
div#header, div#insideheader, div#topnav, div#footer, 
div#navcontainer, p.pic img {display:none;}
div#main {border:none; background:none;}
a {color:black;}
}

В приведенном выше примере я

  1. установка background-color в white и расширение содержимого для заполнения width большей части страницы
  2. удаление большей части лишних частей, таких как nav и footer, лишних фотографий и т. Д.
  3. изменение цвета ссылки
  4. установка шрифта на serif font, удобнее для печати и размера 12px, что является довольно стандартным.
...