웹디자인에서 폰트 적용 폰트셋에 대해 이야기 나누기_체험교류

Hihi, 大家好~  最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档，却没有发现任何能指定某一个特定字体的规则。

想想十年前，你可以随处看见类似于这样的代码：

 

<font face="Frankin Gothic Book">Lorem Ipsumfont>

 

几乎不会有人考虑到，Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果，系统因为找不到这种字体，就改用Mac的默认字体显示了。于是，网页的风格就和原来完全不一样了，根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表；浏览器从列表头部开始匹配，知道找到第一个可用的字体，并使用该字体进行显示。

比如上面这个例子，我们可以创建这样的一个font set：

 

<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsumspan>

 

我们来看看浏览器怎么来呈现这段文字吧：

• Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。
• Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。

这样在Mac上，Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

 

但是可能存在一台电脑，上面既没有Frankin Gothic Book字体，也没有Lucida Grande字体，那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统，导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”，也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个，以及一些其他的通用字体族。在这里，我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下，浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字：

 

<span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsumspan>

이 개선된 텍스트를 브라우저가 어떻게 렌더링하는지 살펴보겠습니다.

• Windows의 경우: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. Frankin Gothic Book은 시스템에 존재하며 Frankin Gothic Book 글꼴을 사용하여 표시됩니다.
• Mac의 경우: 브라우저는 목록의 첫 번째 글꼴부터 검색을 시작합니다. - Frankin Gothic Book이 시스템에 존재하지 않아 검색이 실패합니다. 다음 글꼴인 Lucida Grande를 계속 검색하세요. 시스템에 Lucida Grande 글꼴이 존재하며 검색이 종료되고 Lucida Grande 글꼴이 표시됩니다.
• 일부 시스템: 브라우저가 목록의 첫 번째 글꼴부터 검색을 시작합니다. - Frankin Gothic Book이 시스템에 존재하지 않아 검색이 실패합니다. 다음 글꼴을 계속 검색하세요. Lucida Grande 글꼴이 시스템에도 존재하지 않습니다. 다음 글꼴인 범용 글꼴 sans-serif를 계속 검색하세요. 브라우저는 기본 산세리프 글꼴인 "Arial"을 사용하여 이 텍스트를 표시합니다.

두 가지 사항에 유의하시기 바랍니다. 우선, 범용 글꼴군이 어떤 글꼴에 해당하는지는 브라우저에 따라 결정됩니다. 위의 예에서 브라우저는 Arial을 산세리프 글꼴로 지정했지만, 다른 브라우저가 Helvetica를 산세리프 글꼴로 지정했을 가능성은 전적으로 가능합니다. 최종적으로 어떤 글꼴이 사용될지는 예측할 수 없습니다. 둘째, 범용 글꼴 모음은 글꼴 세트의 다른 글꼴이 유효하지 않은 경우에 사용하는 드롭인 솔루션입니다. 따라서 - 디자이너는 가능한 한 모든 시스템을 포괄하는 완전한 글꼴 세트를 제공하기 위해 최선을 다해야 하며 범용 글꼴 모음 에 의존해서는 안 됩니다.

다음과 유사한 두 가지 작성 방법 모두 잘못입니다.

<스팬 스타일="font-family:sans-serif" >로렘 입숨스팬>
<스팬 스타일="font-family:sans-serif,Arial"> 로렘 입숨스팬>

첫 번째 작성 방법의 실수는 글꼴을 전혀 지정하지 않는 것과 동일하며 글꼴 선택은 여전히 ​​브라우저에 맡겨진다는 것입니다. 글쓰기는 쓰지 않는 것과 같습니다.

두 번째 작성 방법의 오류는 순서에 있습니다. 범용 글꼴 모음은 글꼴 세트의 다른 모든 글꼴이 비활성화된 경우에만 작동해야 하기 때문입니다. 따라서 지정된 글꼴을 범용 글꼴 뒤에 배치하면 지정된 글꼴이 일치하지 않을 때 범용 글꼴이 사용됩니다. 따라서 범용 글꼴이 글꼴 세트의 마지막 위치인지 확인해야 합니다.

여기서 설명드릴 내용은 2가지 입니다.

우선, 브라우저에서 글꼴 세트의 글꼴을 사용하는 규칙이 간단해 보이지만 실제로는 매우 까다롭습니다. 앞으로의 기사에서 구체적인 지침을 제시하겠습니다.

둘째, 글꼴의 CSS 규칙 이름을 글꼴 패밀리라고 하지만 본질적으로 인쇄 의미의 글꼴 패밀리가 아닌 글꼴 세트입니다. 인쇄에 사용되는 글꼴 모음은 Lucida Family(Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande 등 포함) 및 Arial Family(Arial, Arial Black, Arial Rounded 등)와 같은 동일한 서체의 다양한 강도 조합을 나타냅니다. MT 등)), 그러나 분명히 이러한 글꼴 모음은 글꼴 세트로 직접 사용하기에는 적합하지 않습니다.

오늘은 여기까지입니다. 다음번에는 범용 글꼴 모음에 대해 더 자세히 이야기하겠습니다.