일반적으로 사용자가 보이는 페이지 스타일은 3 개의 레이어로 제어됩니다. 첫 번째 레이어는 브라우저의 기본 스타일이며, 두 번째 레이어는 웹 페이지 정의 스타일이며, 세 번째 레이어는 사용자 정의 스타일입니다. CSS와 마찬가지로 우선 순위는 이전의 것보다 높습니다. 즉, 웹 페이지 정의 스타일이 브라우저의 기본 스타일을 무시할 수 있지만 사용자 정의 스타일은 우선 순위가 가장 높습니다. 실제 상황은 브라우저가 다소 사용자 정의 스타일 기능을 제공하지만 사용자가 사용자 정의 할 수있는 사용자는 거의 없으며 일반적으로 고급 사용자로 사용된다는 것입니다. 브라우저의 기본 스타일은 종종 브라우저, 언어 버전 및 다른 시스템 버전에서도 다릅니다. 이는 각 브라우저에서 기본 스타일을 사용하여 페이지의 일관되지 않도록합니다. 브라우저의 기본 설정을 다시 작성하여 각 브라우저의 스타일의 일관성을 보장합니다.
글꼴을 예로 들어보십시오. 기본 글꼴 유형, 글꼴 크기 및 각 브라우저의 기본 글꼴은 곡 XP 아래에 표시 될 때의 기본 글꼴이 다릅니다. 이와 같이. 따라서 일관된 설계를 보장하고 개발 효율성을 향상시키기 위해 일관된 디스플레이 효과를 달성하기 위해 기본 글꼴 스타일을 균일하게 설정해야합니다.
앞으로 다음 기본 글꼴 스타일을 사용하도록 준비하십시오.
몸{
글꼴 : 12px/1.5 Arial;
}우리 페이지의 대부분의 캐릭터는 중국어로되어 있습니다. 중국어를 표시하는 웹 페이지에서 가장 일반적으로 사용되는 일반적인 글꼴은 노래 글꼴이지만 영어, 숫자 및 영어 기호를 표시 할 때 너무 나쁩니다. & copy; 캐릭터, 따라서 일반적으로 CSS를 사용하여 더 나은 글꼴 스타일로 표시하고 송 글꼴을 사용하여 중국어 및 중국 기호를 표시합니다. 내가 arial을 선택한 이유는 다음과 같습니다.
Windows와 Mac에는이 글꼴이 사전 설치되어있어 가장 널리 사용되는 웹 글꼴이어야합니다. 그 잠재적 라이벌 tahoma 와 helvetica 운이 좋지 않습니다.
시각적 디자인 전문가는 예를 들어 Taobao의 기본 글꼴 스타일과 같은 Windows에서 Tahoma와 Helvetica font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; 사용하는 것이 더 좋다고 생각할 수 있습니다. font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; 이것은 훌륭한 선택이지만 Google, Yahoo, YouTube, Bing 및 MSN의 새로운 버전이 arial 첫 번째 기본 글꼴로 사용한다는 것을 알게 될 것입니다. 따라서 미학과 가독성 측면에서 arial 완전히 받아 들일 수 있어야합니다.
일반적으로 글꼴 패밀리를 설정하면 결국 Google의 설정이 font-family:arial,sans-serif; 인코딩은 GBK이며, IE8은 sans-serif 로 인해 노래 글꼴을 렌더링하여 Fonts의 변형을 유발합니다. Taobao는 sans-serif 와 Google이 수행 할 필요가 없습니다.
중국 글꼴의 선택은 매우 제한적이기 때문에 모든 주류 브라우저는 현재 송 글꼴을 사용하여 중국어를 표시하도록 설정했습니다. Baidu의 홈페이지 및 검색 결과 페이지는 font-family:arial; 사용합니다. 일부 사람들은 Firefox 중국어 버전으로 표시된 중국 글꼴이 Microsoft Yahei라는 것을 알 수 있습니다. Mouzhi Network는 사용자 정의 스타일을 권한 부여없이 수정했으며 웹 페이지 스타일이 브라우저에서 설정 한 스타일을 덮어 쓸 수 없기 때문입니다. 또한 웹 페이지를 유연하게 디자인하는 것이 매우 중요하기 때문에 비슷한 상황 때문입니다.
첫 번째 기본 글꼴로서 영어 글꼴을 사용하는 문제 중 하나는 중국어와 영어의 정렬 문제이며 대부분의 상황은 선 높이와 Haslayout을 설정하여 해결할 수 있습니다. 글꼴을 변경하면 문제가 완전히 해결 될 수 있습니다. 분명히,이 문제는 IE에서만 발생합니다. 따라서 웹 사이트가 영어, 숫자 및 영어 기호를 거의 사용하지 않는 경우 {font-family:5b8b4f53;} 직접 설정하는 것이 매우 합리적인 선택입니다.
12px는 Songtung 디스플레이의 한계입니다. Microsoft Yahei는 더 작은 글꼴을 표시 할 수 있지만 현재 응용 프로그램 환경은 아직 성숙하지 않습니다. 송 글꼴은 기본적으로 현재 중국어를 표시하는 유일한 범용 웹 글꼴이므로 12px는 가장 일반적으로 사용되는 글꼴 크기가되었습니다. 물론 제품의 요구에 따라이 기본값을 수정할 수 있습니다.
글꼴 크기 (EM)를 기반으로 설계를 고려할 필요가 없습니다.
Chrome 3.0 이후의 중국어 버전에서는 최소 글꼴 크기가 12px입니다. 최소 글꼴을 10px로 설정하면 결국 12px가됩니다.
이것은 경험 가치입니다. 다른 제품 마다이 값에 대해 요구 사항이 다를 수 있지만 일반적으로 가장 일반적으로 사용되는 기본값을 설정합니다. 예를 들어, Yui의 글꼴에서는 font:13px/1.231 arial,helvetica,clean,sans-serif; 즉 기본 글꼴 크기는 13px이며, 선 높이는 13*1.231 = 16.003px입니다. 기본 글꼴의 1.231 배입니다. 중국의 경우 12px, 14px, 16px, 18px 등과 같은 일반적으로 사용되는 글꼴 크기는 IE6 및 IE7의 선 높이를 짝수로 설정하면 일부 특별한 경우 글꼴 문제를 해결할 수 있습니다.
IE6 및 IE7에서, 라인 높은 값은 글꼴의 완전한 표시를 보장하거나 링크 일 때 밑줄을 효과적으로 표시하기 위해 글꼴의 2px보다 커야합니다.
하위 노드가 계산 된 라인 높이 값을 상속하기 때문에 line-height 설정하면 ( %포함) 브라우저는 첫 번째 정의로 line-height 계산합니다. 글꼴 크기로 변경하지 않고 단위가없는 값은 컨테이너의 font-size 의 배수이므로 단위가없는 값으로 설정하는 것이 가장 좋습니다.
심층적 인 CSS 라인 높이는 line-height 이해하는 데 매우 도움이되며 읽을 가치가 있습니다.
대부분의 플랫폼에는 arial 있어 브라우저의 검색 시간이 줄어 듭니다.
최소한의 코드와 작성하기 쉬운. arial 은 기본적으로 가장 짧은 이름의 글꼴로 CSS의 크기를 절약 할 수 있습니다.
모든 문자는 소문자이며 Google은 현재이를 수행하며, 더 빠르게 작성하고 GZIP 압축의 효율성을 향상시킬 수 있다는 이점이 있습니다.
예를 들어 송유 {font-family:5b8b4f53;} 사용하여 유니 코드 {font-family:5fae8f6f96c59ed1;} 사용하는 것이 가장 좋습니다. 이 이점은 인코딩을 피하는 것이며 모든 주류 브라우저에서도 지원할 수 있습니다.
올바른 글꼴 유형을 사용하여 CSS의 크기를 줄일 수있는 인용 표시를 피하고 따옴표를 피하십시오. 중국 글꼴은 이전 방식으로 작성할 수 있습니다.
중국어와 영어 및 기호의 혼합 배열 테스트를 통해 Microsoft Yahei는 실제로 영어 번호 및 영어 문자를 포함하여 IE6 및 IE7의 디스플레이 효과를 포함하여 상당히 잘 수행되었지만 Microsoft Yahe라는 유일한 후회입니다. 검은 색 글꼴이있는 사용자가 "화면 글꼴의 스무딩 가장자리"옵션을 켜지 않으면 XP에 설치됩니다. Firefox, Safari, Opera 및 특히 IE6에서 매우 흐릿하고 인식하기가 어렵습니다. 현재이 문제에 대한 좋은 해결책은 없으므로 IE6 사용 비율이 매우 작을 때까지 공식적으로 만 사용할 수 있습니다. 어쩌면 XP가 죽을 때까지는 2014 년까지 걸릴 것입니다.
@font-face는 매우 일찍 발견되었지만 브라우저의 지원, 네트워크 속도 및 비즈니스 문제는 거의 사용되지 않았습니다. 최근 글꼴에 대한 좋은 소식은 Firefox 3.6이 Web Open Font Forma를 지원한다는 것입니다. 웹 글꼴의 미래에 대한 관련 정보는 웹 글꼴의 미래, 웹 글꼴 : 현재 상황과 미래, 현재 상황과 웹 글꼴의 미래에 대해 이야기 할 수 있습니다.