深入探讨CSS中字体元素_CSS/HTML

字体的处理在网页设计中无论怎么强调也不为过，毕竟网页使用来传递信息的，而最经典最直接的信息传递方式就是文字，所以，了解一点字体的基本知识对于设计来说还是非常重要的。


　　 中文和英文的最大区别就是中文是方块字，英文是拼音文字，这对字体的处理的影响是巨大的。看看下面的图示就会发现，英文字体里的那些变化在中文字体里都弱化了。

저는 중국 독자로서 습관적으로 사각형 모양을 독서의 단위로 받아들입니다. 사실 이것은 읽을 때 눈이 실제로 텍스트 전체 줄의 모양을 따라가기 쉽습니다. . 이 예를 살펴보십시오.
　 이제 나는 당신에게 말을 걸고 당신을 이해시키려고 노력했습니다
　 이제 당신에게 말을 걸고 당신을 이해시키려고 노력했습니다
　 어느 줄이 더 읽기 쉬워요?
첫 번째 줄은 중국어의 상황과 다소 유사합니다. 차이점은 중국어 단어 하나하나가 그림과 같고 그 변화가 영어 26자보다 훨씬 풍부하다는 것입니다. 디자인할 때 고려해야 할 몇 가지 문제가 있습니다. 제가 말한 내용이 잘못된 경우 토론을 위해 아래에 메시지를 남겨주세요. 이러한 내용은 제가 타이포그래피를 가르칠 때 일반적인 원리로 제시하고 있습니다. 나는 또한 학생들에게 "규칙의 목적은 규칙을 깨는 것입니다."라고 말합니다. 디자인 원리 자체는 규칙을 깨는 것인데, 이는 소위 창의성의 표현이기도 합니다. 문제는 원칙을 먼저 알고 그에 맞춰 실천해야 한다는 점이다.원칙을 숙지한 후에야 원칙을 깨고 창의력을 발휘할 수 있다는 것이다. 하지만 당신은 이러한 원칙을 독창적으로 사용하여 일부를 깨뜨렸으며 동시에 깨뜨린 부분에 대해 어느 정도 보상을 했습니다. 이는 상당히 철학적인 것 같습니다.

개인적으로 더 중요한 원칙은 다음과 같습니다(영어에 적용 가능).

글꼴을 선택할 때 텍스트의 목적인지, 아니면 단락 텍스트인지를 고려해야 합니다.
일반적으로 Arial과 같은 산세리프 글꼴은 제목으로 사용하기에 적합하고, Time New Roman과 같은 세리프 글꼴은 단락 텍스트로 사용하기에 적합합니다. 웹 디자인에는 verdana, tahoma, georgia 등 제가 강력히 추천하는 여러 글꼴이 있습니다. 실제로 Verdana와 같은 글꼴은 거의 2년 동안 세계 최고의 글꼴 디자이너에 의해 디자인되었습니다. Microsoft는 비용을 부담한 다음 IE 4를 설치하면 사용자에게 무료로 제공합니다. 위 버전의 경우 컴퓨터에 이 글꼴이 있어야 하므로 사용자에게 이 글꼴이 있는지 걱정할 필요가 없습니다. 글꼴이 화면에 표시될 때 직면할 수 있는 문제를 고려하여 설계되었으며 거의 ​​완벽한 답변을 제공합니다. 유일한 문제는 모든 사람이 사용하기 때문에 거의 완벽함에도 불구하고 사용에 있어 개성이 부족하다는 것입니다.

글자 크기는 어떻게 되나요?
포럼에는 픽셀과 포인트 중 어느 것이 더 나은지에 대해 많은 토론이 있습니다. 여기서 반복하지 않겠습니다. CSS에는 대략 세 가지 범주가 있습니다.
절대 크기: mm, cm, in, pt, pc
상대 크기: em, ex
장치 기준: px
몇 가지 단어를 더 언급해야 할 수도 있습니다. em과 ex. 예를 들어, 12pt 글꼴의 경우 Em은 다음과 같습니다. 1 em 12pt와 같습니다. 예:
p {
font-size: 10pt;
text-indent: 1em
}
아마도 text-를 사용할 수 있다고 말할 것입니다. 들여쓰기: 10pt로 동일 효과를 얻으려면 효과가 좋지만 이는 이상적인 상황에서만 발생합니다. 사용자가 브라우저의 글꼴 크기를 14pt로 설정하는 것이 더 좋다고 생각하면 디자인한 비율이 손실되므로 상대적인 비율이 손실됩니다. 크기는 웹 페이지의 확장성 디자인을 위한 것입니다.
Ex는 em과 유사하지만 동일하지는 않습니다. 위의 다이어그램으로 돌아가면 x 높이가 글꼴마다 다릅니다. ex는 글꼴의 x 높이를 기준으로 글꼴 크기를 정의합니다.

정렬?
왼쪽 정렬을 사용하는 것이 가장 좋으며, 특히 특별한 디자인 목적이 아닌 이상 왼쪽 및 오른쪽 정렬을 사용하지 않는 것이 좋습니다. 왼쪽 정렬 시 오른쪽이 어긋나는 것은 단지 읽기의 편의를 위한 것입니다. 시력에 해롭습니다. 변화를 이용해 눈을 감쌀 시간임을 알려줍니다.

줄 간격?
줄 간격은 글꼴 크기에 따라 다릅니다. 일반적으로 글꼴 크기가 작을수록 읽기 쉽도록 줄 간격이 커야 합니다. 웹 페이지에 중국어 글꼴에 대한 줄 간격 설정이 없으면 독자가 읽기 어려울 수 있습니다. 텍스트의 큰 단락이 발생하므로 줄 높이를 적절하게 설정하는 것이 매우 필요합니다. 일반적으로 웹 디자인에서 line-height는 글꼴 크기의 1.5배에서 2배 정도가 되어야 합니다. Word 및 기타 텍스트 편집 소프트웨어에서는 일반적으로 글꼴의 120%가 기본 줄 간격으로 설정됩니다. CSS의 줄 높이 설정은 각 줄의 위쪽과 아래쪽에 균등하게 나누어 추가됩니다. 즉, 줄 높이를 20px로 설정하면 각 줄의 위쪽과 아래쪽 사이에 10px의 간격이 생깁니다. 텍스트 줄.

　 단어 간격과 글자 간격?
매우 특별한 목적입니다. 중국어의 경우 이 두 가지가 동일해야 합니다. 이 설정 자체는 특정 글꼴 디자인 결함을 해결하고 텍스트의 가독성을 높이기 위한 것입니다.

칼럼을 쓸 때마다 느끼는 거지만, 에세이 방식의 단점이 아닐까 싶습니다. 논의할 내용을 메시지로 남겨주세요. 저는 벽돌을 버리는 중입니다.