CSS 大师：字体速记和 CSS 复制答案

【问题标题】：CSS gurus: font shorthand and CSS duplicationCSS 大师：字体速记和 CSS 复制
【发布时间】：2012-05-02 20:23:18
【问题描述】：

这更像是一个一般性的最佳实践问题，而不是一个非常集中的问题。我是字体速记的忠实粉丝，因为它解决了我在使用 font-family、font-size 等时遇到的大部分行高问题，并且它确实减少了 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;}

我有一种强烈的感觉，这段代码没有优化...我正在考虑在我的身体上（或在标记中非常高的 id 上）声明字体系列，所以我不必每次都重复它时间，但随后我将不得不使用字体系列、行高和有时字体粗细。这使得 CSS 的数量几乎相同。

有优化此过程的想法或技巧吗？也许标记中的其他类？

ps：对于 Stackoverflow 管理员：这将是“编码风格”标签的问题，但不允许使用它..

【问题讨论】：

标签： font-size css

【解决方案1】：

我会尝试编写 CSS，就好像我在设计数据库或定义 OO 类一样。我会：

尝试消除 CSS 中的冗余
先定义通用 CSS 规则，再定义具体案例
必要时避免使用速记

这是一个例子：

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

【讨论】：

正如我在帖子中提到的，问题是 26px 需要与 18px 不同的 line-height.. 所以我们需要添加 line-height 声明..
1em 表示行高与相应标题的字体大小相匹配。但是，是的，根据您的需要，您将需要额外的 CSS 规则。

【解决方案2】：

从此开始：

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

然后以百分比定义h1、h2 等大小。然后设置颜色，等等。要调整块之间的间距（例如，标题和段落之间，或列表项之间），几乎总是使用垂直边距而不是行高。

没有必要创建混合字体设置，font 速记往往会混淆而不是帮助。

Calibri 是一种不错的小字体，遗憾的是在缺少它的系统上没有合适的备用字体——但几乎任何无衬线字体都比 Tahoma 更好的备用字体，Tahoma 几乎在所有方面都与 Calibri 完全不同（除了是 sans-衬线）。

【讨论】：

确实，Calibri 很烂，但是我在哪里工作的设计师不知道如何为网络制作布局，我得到了一个带有 MYRIAD 字体的设计（设计师只是选择了他喜欢的字体......）所以我看到 Calibri 很像它。除了 Tahoma 之外，您建议作为无衬线字体后备什么？
@George Katsanos，我没有写到 Calibri 很烂，而是相反。它以创造性的方式精心设计（只是有一些怪癖，比如可怕的“→”字符），这意味着它没有很好的备份。这是可能没有比通用 sans-serif 更好的备份的情况之一。

【解决方案3】：

如果都共享相同的字体系列，为什么不在顶部的一个地方声明它，然后定义“细节”。换句话说，最佳做法是设置通用/通用规则，然后重新定义您需要的规则。

示例：

/* 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;
}

【讨论】：

我想这是一种方法，但字符串 font-size:26px;行高：26px；或多或少等于 font:normal 26px/26px Calibri,Tahoma,sans-serif;就字符长度而言..
@GeorgeKatsanos 是的，但是如果您只需要更改行高，那么编写完整的速记是没有意义的，这将花费您更长的时间并且更难（而且编码不好），例如您需要更改字体或该速记中的任何其他规则。
确实，我想我会这么做的。

【解决方案4】：

我相信缩短此时间的最佳方法是指定一个设置字体系列的标签。有点像这样

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

然后你可以进一步微调你的 css 样式中的每个元素。

也只是提一下。加载页面时，CSS 不会引起那么大的问题。我会更专注于优化图像和任何服务器端代码。

【讨论】：