일반적으로 사용자가 보는 페이지의 스타일은 세 가지 레이어로 제어됩니다. 첫 번째 레이어는 브라우저의 기본 스타일, 두 번째 레이어는 웹페이지 정의 스타일, 세 번째 레이어는 사용자 정의 스타일입니다. CSS와 마찬가지로 나중 스타일은 이전 스타일보다 우선순위가 높습니다. 즉, 웹 페이지 정의 스타일이 브라우저의 기본 스타일을 재정의할 수 있으며 사용자 정의 스타일이 가장 높은 우선순위를 가집니다. 실제 상황은 브라우저가 사용자 정의 스타일의 기능을 어느 정도 제공하더라도 이를 사용자 정의하는 사용자는 거의 없으며 일반적으로 고급 사용자입니다. 브라우저의 기본 스타일은 브라우저, 언어 버전, 시스템 버전에 따라 설정이 다른 경우가 많습니다. 이로 인해 기본 스타일을 직접 사용하는 페이지가 다양한 브라우저에서 매우 일관되지 않게 표시되므로 다음과 유사한 문제가 있습니다. YUI의 재설정은 각 브라우저 스타일의 일관성을 보장하기 위해 브라우저의 기본 설정을 다시 작성하는 데 사용됩니다.
글꼴을 예로 들어보겠습니다. 각 브라우저의 기본 글꼴 유형, 글꼴 크기 및 글꼴 줄 높이가 다릅니다. 예를 들어 Windows XP에서 웹 페이지를 표시하는 IE8의 중국어 버전은 확실히 Song Wang입니다. 영어 버전의 경우는 그렇지 않습니다. 따라서 디자인 일관성을 보장하고 개발 효율성을 높이기 위해 일관된 표시 효과를 얻으려면 기본 글꼴 스타일을 균일하게 설정해야 합니다.
앞으로는 다음 기본 글꼴 스타일을 사용할 준비를 하세요.
body{ font: 12px/1.5 arial; }우리 페이지의 콘텐츠 문자 대부분은 중국어로 되어 있습니다. 웹 페이지에 중국어를 표시하는 데 가장 일반적으로 사용되는 글꼴은 송 왕조이지만 송 왕조는 영어, 숫자 및 영어 기호를 표시하는 데 너무 약합니다 . © 문자와 같은 문자이므로 일반적으로 CSS를 통해 더 나은 글꼴 스타일로 표시한 다음 송 왕조를 사용하여 중국어 및 중국어 기호를 표시할 것으로 예상합니다. 제가 Arial을 선택한 이유는 다음과 같습니다.
tahoma 와 helvetica 는 그다지 운이 좋지 않습니다.font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
이것은 매우 좋은 선택이지만, Google, YAHOO, Youtube, Bing, 심지어 MSN의 새 버전에서도 arial 첫 번째 기본 글꼴로 사용한다는 사실을 알게 될 것입니다. 따라서 arial 아름다움과 가독성 측면에서 완전히 수용 가능해야 합니다.font-family:arial,sans-serif; 이지만 적어도 중국어가 아닌 버전에서는 설정됩니다. Win7에서 인코딩이 GBK인 경우 IE8은 sans-serif 로 인해 Song 글꼴을 렌더링하므로 글꼴이 변형됩니다. 이것이 바로 Taobao가 sans-serif 전에 Song 글꼴을 추가해야 하지만 Google에서는 이를 수행할 필요가 없는 이유입니다.font-family:arial; 을 사용합니다. 어떤 사람들은 Firefox China 에 표시되는 기본 중국어 글꼴이 Microsoft Yahei라는 것을 알아차렸을 것입니다. 이는 Mouzhi Network가 승인 없이 사용자 정의 스타일을 수정했으며 웹 페이지 스타일이 브라우저에서 설정한 스타일을 재정의하는 것을 허용하지 않기 때문입니다. . 비슷한 상황이기 때문에 웹페이지를 유연하게 디자인하는 것이 매우 중요합니다. 영어 글꼴을 첫 번째 기본 글꼴로 사용할 때 발생하는 문제 중 하나는 중국어, 영어, 기호가 혼합되어 있을 때 정렬 문제 입니다. 대부분의 경우 줄 높이와 hasLayout을 설정하면 해결되지만 변경하면 완벽하지는 않습니다. 글꼴을 "Song Ti"로 변경하면 문제가 완전히 해결됩니다. 분명히 이 문제는 IE에서만 발생합니다. 따라서 웹사이트에서 영어, 숫자, 영어 기호를 거의 사용하지 않는다면 {font-family:5b8b4f53;} 직접 설정하는 것도 합리적인 선택입니다.
font:13px/1.231 arial,helvetica,clean,sans-serif; 즉, 기본 글꼴 크기는 13px이고 줄 높이는 13*1.231=16.003px이며 기본 줄 높이는 1.231배입니다. 기본 글꼴. 중국어의 경우 일반적으로 사용되는 글꼴 크기는 12px, 14px, 16px, 18px 및 기타 짝수 크기입니다. IE6 및 IE7에서 줄 높이를 짝수로 설정하면 일부 특수한 경우 글꼴 정렬 문제를 해결할 수 있습니다.line-height 설정할 때 단위(% 포함)를 사용하지 않도록 주의하세요 . 하위 노드가 계산된 line-height 값을 상속하므로, 단위를 사용할 때 브라우저는 line-height 첫 번째 정의된 절대 값으로 계산합니다. 값은 글꼴 크기가 변경되어도 변하지 않으며 단위 없는 값은 컨테이너 font-size 의 배수이므로 단위 없는 값으로 설정하는 것이 최선의 선택입니다.line-height 이해하는 데 매우 도움이 되며 읽어볼 가치가 있습니다.arial 있습니다.arial 은 기본적으로 CSS 크기를 절약할 수 있는 가장 짧은 이름을 가진 글꼴입니다.{font-family:5b8b4f53;} 이고, Microsoft Yahei를 사용할 때는 {font-family:5fae8f6f96c59ed1;} 입니다. {font-family:5fae8f6f96c59ed1;} 이는 인코딩 문제를 피할 수 있다는 장점이 있으며 모든 주요 브라우저에서 동시에 지원될 수 있습니다.