독수리 눈으로 브라우저 창을 보는 경향이있는 경우 페이지가 텍스트를로드하기 전에 이미지와 레이아웃을 자주로드한다는 것을 알 수 있습니다. 이는 1990 년대에 우리가 경험 한 것과 정확히 반대되는로드 패턴입니다. 무슨 일이야?
오늘의 질문 및 답변 세션은 커뮤니티 중심의 Q & A 웹 사이트 그룹 인 Stack Exchange의 하위 부문 인 SuperUser가 제공 한 것입니다.
질문
수퍼 유저 독자 인 Laurent는 정확히 페이지가 한 번에했던 것과 완전히 다르게 요소를로드하는 것처럼 보이는 이유에 대해 매우 궁금합니다. 그는 다음과 같이 씁니다.
최근에 많은 웹 사이트에서 텍스트를 표시하는 속도가 느립니다. 일반적으로 배경, 이미지 등은로드되지만 텍스트는로드되지 않습니다. 잠시 후 텍스트가 여기 저기 나타나기 시작합니다 (항상 모든 것이 동시에 표시되는 것은 아닙니다).
기본적으로 텍스트가 먼저 표시되고 이미지와 나머지가 나중에로드 될 때와 반대로 작동합니다. 이 문제를 일으키는 새로운 기술은 무엇입니까? 어떤 생각?
연결 속도가 느리므로 문제가 더욱 두드러 질 수 있습니다.
예제는 [above]를 참조하십시오. 모든 것이로드되었지만 텍스트가 최종적으로 표시 되려면 몇 초가 더 걸립니다.
그래서 무엇을 제공합니까? Laurent와 우리 중 많은 사람들은 텍스트가 먼저로드되고 나머지 모든 것 (garrish 애니메이션 GIF, 타일 배경 및 90 년대 후반 웹 브라우징의 기타 모든 아티팩트)이 나중에로드 된 때를 기억합니다. 디자인 요소의 현재 상황이 먼저 발생하고 나중에 텍스트가 발생하는 원인은 무엇입니까?
대답
수퍼 유저 기고자 인 Daniel Andersson이 왜 글꼴을로드 하는가 마지막 미스터리의 밑바닥에있는 놀랍도록 상세한 답변을 제공합니다.
한 가지 이유는 오늘날 웹 디자이너가 웹 글꼴 (일반적으로 WOFF 형식), 예 : ...을 통하여 Google 웹 글꼴 .
이전에는 사이트에 표시 할 수있는 유일한 글꼴은 사용자가 로컬로 설치 한 글꼴이었습니다. 예를 들어 Mac과 Windows 사용자는 반드시 동일한 글꼴을 사용하지 않았으며 디자이너는 본능적으로 항상 규칙을 다음과 같이 정의했습니다.
font-family : Arial, Helvetica, sans-serif;첫 번째 글꼴이 시스템에서 발견되지 않으면 브라우저는 두 번째 글꼴을 찾고 마지막으로 대체 "sans-serif"글꼴을 찾습니다.
이제 브라우저가 글꼴을 다운로드하도록 CSS 규칙으로 글꼴 URL을 제공 할 수 있습니다.
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);다음과 같이 특정 요소에 대한 글꼴을로드합니다.
font-family : 'Droid Serif', sans-serif;이것은 사용자 정의 글꼴을 사용할 수 있다는 점에서 매우 널리 사용되지만, 다운로드 시간, 글꼴로드 시간 및 렌더링 시간을 포함하여 브라우저에서 리소스를로드 할 때까지 텍스트가 표시되지 않는 문제도 발생합니다. 나는 이것이 당신이 경험하고있는 유물이라고 기대합니다.
예를 들어, 제 국가 신문 중 하나는 오늘의 뉴스 , 헤드 라인에는 웹 글꼴을 사용하고 리드는 사용하지 않습니다. 따라서 해당 사이트가로드되면 일반적으로 리드가 먼저 표시되고 0.5 초 후에 위의 모든 빈 공간이 헤드 라인으로 채워집니다 (Chrome 및 Opera에서는 최소한 다른 사람을 시도하지 않았습니다).
(또한 디자이너들은 요즘 모든 곳에 자바 스크립트를 절대적으로 뿌리고 있기 때문에 누군가 텍스트로 영리한 일을하려고 할 수도 있습니다. 이것이 지연되는 이유입니다. 위에서 설명한 웹 글꼴 문제라고 생각합니다.)
부가:
이 답변은 매우 찬성표가되었지만 자세히 설명하지 않았거나 때문에 이의. 질문 스레드에 댓글이 많았으므로 […]을 조금 확장 해 보겠습니다.
이 현상은 일반적으로“스타일이없는 콘텐츠의 플래시”, 특히“스타일이없는 텍스트의 플래시”로 알려져 있습니다. "FOUC"및 "FOUT"을 검색하면 더 많은 정보를 얻을 수 있습니다.
나는 추천 할 수있다 웹 디자이너 Paul Irish의 웹 글꼴 관련 FOUT 게시물 .
주목할 수있는 것은 다른 브라우저가 이것을 다르게 처리한다는 것입니다. 나는 내가 오페라와 크롬을 테스트했다고 썼다. 둘 다 비슷하게 행동했다. 모든 WebKit 기반 앱 (Chrome, Safari 등)은 FOUT을 피하도록 선택합니다. 아니 웹 글꼴로드 기간 동안 대체 글꼴로 웹 글꼴 텍스트를 렌더링합니다. 설사 웹 글꼴이 캐시됩니다. 의지 렌더링 지연 . 이 질문 스레드에는 그렇지 않다는 의견이 많이 있으며 캐시 된 글꼴이 이와 같이 작동하는 것이 잘못되었습니다. 위의 링크에서 :
어떤 경우에 FOUT을 얻을 수 있습니까?
- 의지: 원격 ttf / otf / woff 다운로드 및 표시
- 의지: 캐시 된 ttf / otf / woff 표시
- 의지: data-uri ttf / otf / woff 다운로드 및 표시
- 의지: 캐시 된 데이터 URI 표시 ttf / otf / woff
- 하지 않을 것이다: 기존 글꼴 스택에 이미 설치되고 이름이 지정된 글꼴 표시
- 하지 않을 것이다: local () 위치를 사용하여 설치되고 이름이 지정된 글꼴 표시
Chrome은 렌더링하기 전에 FOUR 위험이 사라질 때까지 대기하므로 지연이 발생합니다. 어느쪽으로 범위 효과가 표시되는 경우 (특히 캐시에서로드 할 때) 렌더링해야하는 텍스트의 양과 기타 요인에 따라 달라 지지만 캐싱이 효과를 완전히 제거하지는 않습니다.
Irish는 또한 게시물 하단에 2011–04–14의 브라우저 동작과 관련된 몇 가지 업데이트를 제공합니다.
- Firefox (FFb11 및 FF4 Final 기준) 더 이상 FOUT가 없습니다! 우후! http://bugzil.la/499292 기본적으로 텍스트는 3 초 동안 보이지 않고 대체 글꼴로 돌아옵니다. 웹 폰트는 아마 그 3 초 안에로드 될 것입니다… 바라건대 ..
- IE9는 WOFF, TTF 및 OTF를 지원합니다 (하지만 임베딩 비트 물건을 놓다 – WOFF를 사용하는 경우 대부분 논쟁). 하나!!! IE9에는 FOUT이 있습니다. :(
- Webkit에는 착륙을 기다리는 패치 0.5 초 후에 대체 텍스트를 표시합니다. 따라서 FF와 동일한 동작이지만 3 초 대신 0.5 초입니다.
이것이 디자이너를 대상으로 한 질문이라면 다음과 같은 문제를 피할 수있는 방법을 찾을 수 있습니다.
webfontloader, 그러나 그것은 또 다른 질문이 될 것입니다. Paul Irish 링크는이 문제에 대해 더 자세히 설명합니다.
설명에 추가 할 것이 있습니까? 댓글에서 소리를 내세요. 기술에 정통한 다른 Stack Exchange 사용자의 답변을 더 읽고 싶으신가요? 여기에서 전체 토론 스레드를 확인하십시오. .
