CSS-гуру: сокращение шрифта и дублирование CSS

Это скорее общий вопрос из практики, а не очень сфокусированный. Я большой поклонник сокращения шрифтов, поскольку он решает большинство головных болей в линии, которые у меня были, когда я использовал только семейство шрифтов, размер шрифта и т. Д. И т. Д., И это действительно сокращает общее количество объявлений CSS обеспечивая полный контроль над типографикой.CSS-гуру: сокращение шрифта и дублирование CSS

Проблема заключается в том, что размеры шрифта изменить Повсеместно страницы, так что Линейно-высоты, так что я окажусь переопределение шрифта несколько раз, например, так:

.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;} 
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;} 
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;} 
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;} 
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;} 
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;} 
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}

У меня есть сильное чувство этот код не оптимизирован ... Я собираюсь объявить семейство шрифтов на моем теле (или на очень высоком значении разметки), поэтому мне не нужно повторять его каждый раз, но тогда я буду использовать шрифт-семейство, линейную высоту и несколько раз шрифт-вес. Это составляет примерно столько же CSS.

Любые идеи или советы по оптимизации этой процедуры? Может быть, дополнительные классы в разметке?

пс: для администраторов StackOverflow: Это будет вопрос для «кодирования типа» тег, но он не имеет права использовать его ..

источник

2012-05-02 George Katsanos

Я бы попытался написать CSS, как если бы я разрабатывал базу данных или определял OO-классы. Я:

попытки устранить избыточность в CSS
определить общие правила CSS первыми, а затем конкретные случаи
избежать Shorthands При необходимости

Вот пример:

h1, h2, h3 { 
    font: normal large/1em Calibri,Tahoma,sans-serif; 
} 
h1 { 
    font-size: 26px; 
} 
h2 { 
    font-size: 22px; 
} 
h3 { 
    font-size: 18px; 
}

источник

2012-05-02 11:01:37

Как я упоминал в своем сообщении, проблема в том, что 26px нуждается в различной высоте строки, чем 18px. Поэтому нам нужно добавить объявление строки-высоты. –

«1em» означает, что высота строки соответствует шрифту соответствующего заголовка размер. Но да, вам понадобятся дополнительные правила CSS в зависимости от ваших потребностей. –

Это круто! –

если все одни и те же семейство шрифтов, почему бы не объявить его в одном месте вверху, а затем определите «мелкие детали». Другими словами, наилучшей практикой является установление общих/общих правил, а затем переопределение тех, которые вам нужны.

пример:

/* define the font family/general characteristics */ 

h1, h2, h3 { 
    font:normal 23px/23px Calibri,Tahoma,sans-serif; 
} 

/* define the details for the ones you would like */ 
h1 { 
    font-size:26px; 
    line-height:26px; 
    border-bottom:2px dotted #bababa; 
    color:#204fe7; 
    padding-bottom: 8px; 
    margin-bottom: 8px; 
}

источник

2012-05-02 10:33:27 jackJoe

Я думаю, это один из способов, но строки размером шрифта: 26px; высота строки: 26px; более или менее равны font: normal 26px/26px Calibri, Tahoma, sans-serif; с точки зрения характера. –

@GeorgeKatsanos да, но нет смысла писать полную стенографию, если вам просто нужно изменить высоту линии, что займет у вас больше времени, и это сложнее (и это плохое кодирование), если для вам нужно изменить шрифт или любое другое правило в этом сокращении. – jackJoe

Действительно, я думаю, что я это сделаю. –

Я считаю, что лучший способ, чтобы сократить это вниз будет указать один тег, который устанавливает семейство шрифтов. Немного похоже на это

body { 
    font-family:Calibri,Tahoma,sans-serif; 
}

Затем вы можете настроить каждый элемент дальше по стилям css.

Также можно упомянуть. CSS не вызывает большую проблему при загрузке страницы. Я бы больше сосредоточился на оптимизации изображений и любом коде на стороне сервера.

источник

2012-05-02 10:37:57 Undefined

Начать с этого:

body { font-family: Calibri, sans-serif; } 
* { line-height: 1.3; }

Затем определите h1, h2 и т. Д. Размеры в процентах. Затем установите цвета и т. Д. Чтобы настроить расстояние между блоками (например, между заголовком и абзацем или между элементами списка), почти всегда лучше использовать вертикальные поля, а не высоту строки.

Нет необходимости создавать смешанный салат с настройками шрифта, а стенография font имеет тенденцию смущать, а не помогать.

Calibri - хороший маленький шрифт, к сожалению, без подходящего резерва для систем, которые этого не хватает, но практически любой шрифт без засечек лучше отступает, чем Tahoma, который практически полностью отличается от Calibri (за исключением того, -serif).

источник

2012-05-02 12:23:18

Действительно, Калибри сосет, но где я работаю, дизайнеры понятия не имеют о том, как сделать макеты для Интернета, я получил дизайн с шрифтом MYRIAD (дизайнер просто подобрал то, что ему нравилось ..), поэтому я увидел, что Калибра снова его разбирает. Что вы предлагаете в качестве замены без засечек, кроме Tahoma? –

btw, что такое высота линии: 1,3; ? Нет единицы? –

@ Джордж Кацанос, я не писал, что Калибра сосет, скорее наоборот. Он хорошо разработан в творческом стиле (только с некоторыми причудами, такими как ужасный символ «→»), и это означает, что для него нет хорошей резервной копии. Это один из случаев, когда, вероятно, нет лучшей резервной копии, чем общий «sans-serif». –

CSS-гуру: сокращение шрифта и дублирование CSS

ответ

Смежные вопросы