한 가지 이유는 오늘날 웹 디자이너가 Google 웹 글꼴 과 같은 웹 글꼴 (일반적으로 WOFF 형식) 을 사용하는 것을 좋아하기 때문입니다 .

이전에는 사이트에 표시 할 수있는 글꼴은 사용자가 로컬로 설치 한 글꼴뿐이었습니다. 예를 들어 Mac과 Windows 사용자가 반드시 같은 글꼴을 가질 필요는 없었기 때문에 설계자는 본능적으로 항상 다음과 같이 규칙을 정의했습니다.

font-family: Arial, Helvetica, sans-serif;

여기서 첫 번째 글꼴이 시스템에서 발견되지 않으면 브라우저는 두 번째 글꼴을 찾은 다음 마지막으로 “sans-serif”글꼴을 찾습니다.

이제 브라우저가 글꼴을 다운로드하도록 글꼴 URL을 CSS 규칙으로 제공 할 수 있습니다.

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);

다음과 같이 특정 요소의 글꼴을로드하십시오.

font-family: 'Droid Serif',sans-serif;

이것은 사용자 정의 글꼴을 사용할 수있는 인기가 있지만 다운로드 시간, 글꼴 로딩 시간 및 렌더링 시간을 포함하여 브라우저가 리소스를로드 할 때까지 텍스트가 표시되지 않는 문제가 발생합니다. 이것이 당신이 겪고있는 인공물이라고 생각합니다.

예를 들어, 내 국가 신문 중 하나 인 Dagens Nyheter 는 헤드 라인에 웹 글꼴을 사용하지만 리드는 사용하지 않습니다. 따라서 해당 사이트가로드되면 일반적으로 리드가 먼저 표시되고 0.5 초 후에 위의 모든 빈 공간이 채워집니다. 헤드 라인 (최소한 Chrome 및 Opera에서 적용됩니다. 다른 사용자는 시도하지 않았습니다).

(또한, 디자이너는 요즘 어디서나 JavaScript를 뿌릴 수 있으므로 누군가가 텍스트로 영리한 무언가를 시도하고 있기 때문에 지연되는 이유가 있습니다. 사이트에 따라 다르지만 일반적으로 텍스트가 지연되는 경향이 있습니다. 시간은 위에서 설명한 웹 글꼴 문제입니다.)

부가

이 답변은 크게 자세하게 설명되지 않았지만 아마도 이것으로 인해 크게 반박되었습니다 . 질문 스레드에 많은 의견이 있었으므로 조금 확장하려고 시도합니다 (주제가 보호 된 후 많은 의견이 잠시 사라진 것 같습니다-일부 중재자가 수동으로 주석을 청소했을 수도 있음). 또한이 스레드의 다른 답변은 모두 자체 방식으로 확장되므로 읽으십시오.

이 현상은 일반적으로 “스타일이없는 컨텐츠의 플래시”로, 특히 “스타일이없는 텍스트의 플래시”로 알려져 있습니다. “FOUC”및 “FOUT”을 검색하면 자세한 정보가 제공됩니다.

웹 글꼴과 관련하여 FOUT에 관한 웹 디자이너 Paul Irish의 게시물을 추천 할 수 있습니다 .

주목해야 할 것은 다른 브라우저가 이것을 다르게 처리한다는 것입니다. 나는 위에서 비슷하게 행동했던 Opera와 Chrome을 테스트했다고 위에서 썼다. 모든 WebKit 기반 항목 (Chrome, Safari 등) 은 웹 글꼴로드 기간 동안 대체 글꼴로 웹 글꼴 텍스트를 렌더링 하지 않으므로 FOUT을 피하도록 선택합니다 . 경우에도 웹 글꼴 캐시,이 것 렌더 지연 될 . 이 질문 스레드에는 그렇지 않다고 말하는 많은 주석이 있으며 캐시 된 글꼴이 이와 같이 동작하지만 위의 링크와 같이 잘못 작동하는 것은 잘못되었습니다.

어떤 경우에 FOUT을 받게 되나요?

• Will : 원격 ttf / otf / woff 다운로드 및 표시
• Will : 캐시 된 ttf / otf / woff 표시
• Will : data-uri ttf / otf / woff 다운로드 및 표시
• Will : 캐시 된 데이터 표시 uri ttf / otf / woff
• 하지 않습니다 : 기존의 글꼴 스택에 이미 설치되어 이름이 지정된 글꼴 표시
• 안함 : local () 위치를 사용하여 설치되고 이름이 지정된 글꼴 표시

렌더링 전에 FOUT 위험이 사라질 때까지 Chrome이 대기하기 때문에 지연이 발생합니다. 되는 정도 효과를 볼 수 있습니다 (특히 캐시에서로드 할 때) 필요 텍스트의 양이 렌더링 할 다른 것들과 아마 다른 요인들에 의존하는 것 같다,하지만 캐싱은 완전히 효과를 제거하지 않습니다.

아일랜드어는 또한 2011 년 4 월 14 일 ~ 14 일 현재 게시물의 맨 아래에 브라우저 동작과 관련된 일부 업데이트가 있습니다.

• Firefox (FFb11 및 FF4 Final) 는 더 이상 FOUT을 갖지 않습니다! 와우 후! http://bugzil.la/499292 기본적으로 텍스트는 3 초 동안 보이지 않으며 대체 글꼴을 다시 표시합니다. 웹 폰트는 아마도 3 초 안에로드 될 것입니다.
• IE9는 WOFF 및 TTF 및 OTF를 지원합니다 ( 임베디드 비트 세트 가 필요하지만 WOFF를 사용하는 경우 무음). 하나!!! IE9에는 FOUT이 있습니다. 🙁
• 웹킷에 0.5 초 후에 대체 텍스트를 표시 하기 위해 대기중인 패치 가 있습니다. FF와 같은 동작이지만 3 대신 0.5로 작동합니다.
• 추가 : Blink 에 버그도 등록되어 있지만 WebKit과 동일한 구현에 대해서는 최종 합의에 도달하지 못한 것 같습니다.

이것이 디자이너를위한 질문이라면,와 같은 이런 종류의 문제를 피할 수있는 방법으로 갈 수 webfontloader있지만 또 다른 질문이 될 것입니다. Paul Irish 링크는이 문제에 대해 더 자세히 설명합니다.

답변