1

这更像是一个一般性的最佳实践问题，而不是一个非常集中的问题。我是字体速记的忠实粉丝，因为它解决了我在使用 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 上），所以我不必每次都重复它，但是那么我将不得不使用 font-family、line-height 和有时 font-weight.. 这使得 CSS 的数量几乎相同。

有什么想法或技巧可以优化这个过程吗？也许标记中的其他类？

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

4

4 回答 4

2

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

  1. 尝试消除 CSS 中的冗余
  2. 先定义通用 CSS 规则，然后定义具体情况
  3. 必要时避免使用速记

这是一个例子：

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-02T11:01:37.597 回答
1

从此开始：

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

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

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

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

于 2012-05-02T12:23:18.250 回答
0

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

例子：

/* 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-02T10:33:27.093 回答
0

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

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

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

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

于 2012-05-02T10:37:57.570 回答