2009-05-30 2 views
18

나는 실제로 지금 두 가지 질문을 가지고 있습니다.웹 사이트에 알맞은 글꼴 선택에 대한 모든 것

1) 웹 사이트에는 어떤 글꼴이 선호됩니까? 지금은 'Segoe UI'를 정말 좋아하지만 Vista 및 2008 Server와 같은 최신 Windows 시스템에서만 사용할 수 있습니다. 그래서 시퀀스를 정의했습니다 :

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; 

나는 'Segoe UI'를 제외한 모든 모습을 정말 좋아하지 않습니다. 그 외에 멋진 폰트에 대한 제안 사항이 있습니까? 나는 또한 'Trebuchet MS'를 시험해 보았는데, 문서에서는 훌륭하게 보였으 나 실제로 페이지에는 보이지 않았다.

2) CSS로 각 글꼴마다 다른 글꼴 크기를 지정할 수있는 방법은 무엇입니까? 'Segoe UI - 9px', Tahoma-8px 등과 같이 가능하지는 않지만 어쩌면 몇 가지 트릭이 있습니까?

나는 현재 상대 글꼴 크기를 사용하기 위해 많은 의견을 얻을 것이라고 알고 있지만, 나는 그것을 원하지 않는다. 내 디자인에 신축성이없는 그래픽이 있습니다. 사용자 또는 브라우저 기본값이 다양한 크기로 렌더링 된 글꼴로 이어지게되면 디자인이 곧 사라집니다. 나는 디자인을하지 않는 것보다 폰트 크기 제한이있는 디자인을 선호합니다.

+0

을 related : http://stackoverflow.com/questions/554055/web-programming-grand-challenges/554175#554175 –

+0

관련 fo에 대한 멋진 개요를 찾을 수 있습니다. 여기에 스택 스택 : http://cssfontstack.com/ –

+0

실제로 모든 컴퓨터에 Arial이 있기 때문에 Arial 앞에 Helvetica를 두는 것이 의미가 없지만 Helvetica를 사용하면 Arial을 사용할 수있는 사람이 훨씬 적습니다. 대체로 더 의미가 있습니다. –

답변

17

1) 웹 사이트에는 어떤 글꼴이 선호됩니까?

safe web fonts과 관련된 페이지를 참조하십시오.

2) CSS를 통해 특정 글꼴 군마다 다른 글꼴 크기를 지정하는 방법은 무엇입니까?

아니요.

곧 모든 주요 브라우저에서 @font-face을 지원하며 원하는 글꼴을 웹 사이트에서 사용할 수 있습니다.

그때까지 Cufón 또는 sIFR을 확인하십시오.

+0

불행히도 모든 주요 브라우저의 지원이 모든 고객의 지원을 의미하는 것은 아닙니다. 레거시 브라우저 (IE6는 내가 너를보고있다)는 물건을 붙잡기를 계속할 것이다 (CSS, JS, ...). 다행히도 @ font-face는 지원하지 않는 브라우저에서 무시해야합니다. 그래야 정상적으로 성능이 저하 될 수 있습니다. –

+10

Internet Explorer는 IE 4.0 이후 @ font-face를 지원합니다 ... –

+1

@Mathius하지만 지원 만합니다. EOT 독점 형식. 크로스 브라우저 지원을 받으려면 두 가지 형식으로 형식을 제공해야합니다. http://randsco.com/index.php/2009/07/04/p680 – AaronLS

4

Re. 귀하의 글꼴 선택, 나는 유용성을 핵심 요구 사항으로 간주 할 것입니다 (의도적으로 스타일이 지정된 형식을 사용하지 않는 한).

Neilsonstudy으로 작성되었으며 Verdana 또는 Arial은 가독성 측면에서 최적의 선택입니다.

5

1) 웹 사이트에는 어떤 글꼴이 선호됩니까? 현재 [01206]에 대한 최신 정보가 없습니다. 그래서 시퀀스를 정의했습니다. font-family : 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; 'Segoe UI'를 제외하고는 모두 의 모습이 마음에 들지 않습니다. 어떤 좋은 글꼴에 관한 제안은 그 외에 일 수 있습니까? 나는 또한 'Trebuchet MS'를 시도했는데, 문서에서는 훌륭하게 보였지만 실제로는 페이지에 없었습니다.

어떤 글꼴이 선호됩니까? 이것은 어려운 질문입니다. 각각 기본 글꼴 세트가있는 세 가지 주요 컴퓨팅 플랫폼이 있습니다.그런 다음 Adobe Creative Suite, Microsoft Office 제품군 또는 XP 용 Powerpoint 2007 뷰어와 같은 간단한 소프트웨어와 같은 일부 소프트웨어는 사용자의 글꼴을 설치합니다. 웹에는 commonly used fonts이라는 많은 차트가 있습니다.

웹 사이트의 경우 눈에 잘 띄는 글꼴을 사용하려고합니다. 웹에서 일반적으로 사용되는 대부분의 화면 글꼴은 읽기 쉽습니다. 예를 들어 언급 한 글꼴이 좋은 예입니다. 화면 글꼴에서 가장 읽기 쉬운 글꼴은 Verdana이지만 일반적으로보기에는 좋지 않습니다. Arial은 항상 안전한 선택입니다.

Segoe UI 선언에주의하십시오. Windows XP 사용자가 해당 글꼴을 사용하는 경우 앤티 앨리어싱을 사용하지 않도록 설정하면 읽을 수 없을 것입니다.

머리글의 경우 sIFR 및 Cufon과 같은 기술을 사용하여 텍스트를 기본이 아닌 시스템 글꼴로 바꿀 수 있습니다.

크기에 대한 간단한 참고 사항 : 대부분의 사이트는 실제로 작은 글꼴 크기를 설정하는 경향이 있습니다. 긴 텍스트의 경우 최소 13 픽셀입니다 (relative readibility 참조). Times와 같이 x 높이가 작은 글꼴은 머리글이나 충분한 크기 (예 : 15 픽셀 이상)로만 사용해야합니다.

2) 각 특정 글꼴의 familiy에 대한 CSS 다른 글꼴 크기로 지정할 수있는 방법? 'Segoe UI - 9px', Tahoma-8px 등과 같이 가능합니다. 이것은 아마도 가능하지 않지만 어쩌면 거기에 은 속임수입니까?

아니요. 불가능합니다. 브라우저와 OS에 대한 가정은 자바 스크립트를 통해 실행되고 있기 때문에 설치 한 글꼴에 대한 가정을 할 수 있지만 상대적으로 적은 이익을 얻기 위해서는 많은 노력이 필요합니다. 나는 그것을 반대 할 것이다.

2

CSS3는 기본적으로 다운로드 할 수있는 글꼴을 지원합니다 (다운로드하지 않더라도 바로 작동합니다). 원하는 서체를 사용할 수 있습니다. Firefox 3.5 및 Opera 10에서만 사용할 수 있기 때문에 기다려야합니다.

Arial/Helvetica, Verdana, Georgia 또는 Times Roman과 같은 고전적인 글꼴을 사용하여 시각적 효과를 높일 수도 있습니다 . 페이지의 다른 요소와 올바른 글꼴 크기 및 대비를 찾아야합니다.

+0

Safari 4도이 기능을 지원합니다. – User

7

사이트에 적합한 서체를 사용하십시오. "이것은 웹 사이트를위한 최고의 글꼴"이라고 말하는 것처럼 간단하지 않습니다. Robert Bringhurst의 "The Elements of Typographic Style" :

  • "내용을 존중하는 인쇄물이 있습니다."라는 두 개의 인용문 (읽기 원칙)이 있습니다.
  • "제목뿐만 아니라 작업에 적합한 얼굴을 선택하십시오."

세리프 얼굴이 실제로 웹 사이트에 적합하지 않으면, 산세 리프 얼굴이 디지털 미디어에 더 적합합니다.

필 오예 (Phil Oye)는 두 번째 요점에 대해 최근에 FontUnstack을 발표했습니다.이 요소는 특정 요소에 어떤 글꼴이 사용되고 있는지 알려주는 jQuery 플러그인입니다. 요소에 다른 서체에 특정 스타일을 적용 할 수있는 클래스 (예 : "set_in_gill_sans")가 제공됩니다.

또한 font matrix (1.5 세)과 이것들을 잘 고려한 font-stacks을 확인하십시오.

2

나는 개인적으로 Verdana와 Georgia를 좋아하지만 Mac/Windows- "안전"만 있습니다. 어쩌면 첫 번째 선택과 동일한 측정 항목을 가진 두 번째 선택 글꼴을 선택하는 것이 가장 좋습니다.

2

대부분의 주요 브라우저는 이미 @font-face을 지원하므로 공개적으로 사용 가능한 글꼴을 사용할 수 있습니다.

Google Web Fonts

당신을 위해 글꼴을 지불 호스트 것 Typekit 같은 웹 사이트가 지불하고 당신이 그들을 구입하자 :
Google Web Fonts 호스트 일부 무료 글꼴을 선택할 수

enter image description here

+1

+1 Google 웹 글꼴에 대한 포인터입니다. 쿠오,이 질문은 꽤 오래되었습니다. – icabod

관련 문제