Question

这更像是一般的最佳实践问题而不是非常集中的问题。我是字体速记的忠实粉丝，因为它解决了我在使用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;}

我强烈感觉这段代码没有优化......我想在我的身体上声明font-family（或者在标记中的id很高），所以我不必每次都重复它时间，但后来我将不得不使用font-family，line-height和一些font-weight ..这使得CSS的数量几乎相同。

优化此程序的任何想法或提示？也许标记中有其他类？

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

Answer 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;
}

Answer 2

从这开始：

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

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

无需创建字体设置的混合沙拉，font速记往往会混淆而不是帮助。

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

Answer 3

如果所有人共享相同的font-family，为什么不在顶部的一个地方声明它，然后定义“精细细节”。换句话说，最佳做法是设置通用/一般规则，然后重新定义所需的规则。

示例：

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

Answer 4

我认为缩短此选项的最佳方法是指定一个设置字体系列的标记。有点像这样

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

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

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

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

4 个答案: