29Aug

Зашто веб странице одмах не приказују свој текст?


Ако сте склони да гледате окно прегледача са орао очима, можда сте приметили да странице често учитавају своје слике и изглед пре него што учитају свој текст - тачан супротни опсег учитавања које смо искусили током деведесетих.Шта се дешава?

Данашње питање & амп;Сесија одговора долази нам захваљујући СуперУсер-у подскупу Стацк Екцханге-а, групације К & ама;

Питање

СуперУсер читач Лаурент је веома интересантан због чега се чини да странице чине потпуно нове различите елементе него што су то учинили једном.Пише:

Приметио сам да недавно многи сајтови споро приказују свој текст.Обично, позадина, слике и тако даље ће се учитати, али нема текста.После неког времена текст почиње да се појављује овде и тамо( не увек све у исто време).

У основи функционише супротно онако како се то користило, када је текст први пут приказан, онда су слике, а остало се накнадно учитавало.Која нова технологија ствара ово питање?Било који идеја?

Имајте на уму да сам на спором прикључку, што вероватно наглашава проблем.

Погледајте [горе] за пример - све је уцитано, али потребно је неколико секунди пре него што се текст коначно прикаже.

Па шта даје?Лаурент, и многи од нас, сећају се времена када се први пут учитао текст, а све остало-поклони анимирани ГИФ-ови, позадине у плочицама и сви остали артефакти веб прегледача из касних деведесетих - дошли су касније.Шта узрокује тренутну ситуацију елемената дизајна, текст касније?

Одговор на

СуперУсер допринос Даниел Андерссон нуди чудесно детаљан одговор који се управо налази на дну прошлости мистерије због разлога:

Један разлог је што веб дизајнери данас желе да користе веб фонтове( обично у ВОФФ формату), на примеркроз Гоогле Веб фонтове.

Претходно, једини фонтови који су могли бити приказани на локацији су они који је корисник инсталирао локално.Од нпр.Мац и Виндовс корисници нису нужно имали исте фонтове, дизајнери су инстинктивно увек дефинисали правила као

фонт-фамили: Ариал, Хелветица, санс-сериф;

где, ако први фонт није пронађен на систему, претраживач ће тражити други, и на крају резервни фонт "санс-сериф".

Сада можете да наведете УРЛ фонта као ЦСС правило да бисте добили прегледач за преузимање фонта, као такав:

@импорт урл( хттп: //fonts.googleapis.com/ цсс? Фамили = Дроид + Сериф: 400,700);

, а затим учитајте фонт за одређени елемент нпр.

фонт-фамили: 'Дроид Сериф', санс-сериф;

Ово је веома популарно да можете користити прилагођене фонтове, али такође доводи до проблема да се текст не приказује док се претраживач не учита, а то укључује време преузимања, време учитавања фонта и време рендеровања.Очекујем да је ово артефакт који доживљавате.

Као пример: један од мојих националних новина, Дагенс Нихетер, користи веб фонтове за своје наслове, али не и њихове странице, тако да када се то мјесто учита, обично сам први пут видим водове, а пола секунде касније сви празни простори изнаднасељено са насловима( то је тачно на Цхроме и Опера, барем нису покушали други).

( Такође, дизајнери апсолутно свуда шпрте ЈаваСцрипт ових дана, па можда неко покушава да уради нешто паметно са текстом, због чега је одложен. То би било врло специфично за локацију: генерална тенденција да се текст одгађаово су проблеми са веб фонтовима описаним горе, верујем.)

Додатак:

Овај одговор је постао врло унапредјен, иако нисам ишао у много детаља, или можда јер овога.Постојао је много коментара у тхреад тхреад-у, па ћу покушати да проширим мало [...]

Појав је очигледно познат као "блиц необрађеног садржаја" уопште, а посебно "блиц необрађеног текста".Претраживање "ФОУЦ" и "ФОУТ" даје више информација.

Ја могу препоручити веб дизајнера Паул Ирисх-а на ФОУТ-у у вези са веб фонтовима.

Оно што се може приметити јесте да различити прегледачи поступају другачије.Написао сам горе да сам тестирао Опера и Цхроме, који су обојица понашали слично.Сви базирани на ВебКиту( Цхроме, Сафари, итд.) Бирају да избегавају ФОУТ од стране а не рендерирање веб фонт фонта помоћу резервног фонта током периода учитавања веб фонта. Чак и ако се копира у веб фонт, ту ће бити кашњење рендера .Постоји пуно коментара у овом питању која говори другачије и да је погрешно што се кехирани фонтови понашају овако, али нпр.из горе наведене линије:

У којим случајевима ћете добити ФОУТ

  • Вилл: Преузимање и приказивање удаљеног ттф /otf/ вофф
  • Вилл: Приказивање кешираног ттф /otf/ вофф
  • Вилл: Преузимање и приказивање података-ури ттф /otf/ вофф
  • Вилл: Приказивање кечираних података-ури ттф /otf/ вофф
  • Неће: Приказивање фонта који је већ инсталиран и именован у традиционалном стацку фонта
  • Неће: Приказивање фонта који је инсталиран и именован помоћу локалне() локација

С обзиром да Цхроме чека пре него што је Футуре ризик нестао пре рендеринга, ово даје кашњење.На који начин ​​мери ефекат је видљив( поготово приликом учитавања из кеша) чини се, између осталог, зависно од количине текста који треба да се изведе и можда и других фактора, али кеширање не у потпуности уклања ефекат.

Ирски такође има неке исправке у вези са понашањем претраживача од 2011-04-14 на дну поста:

  • Фирефок ( од ФФб11 и ФФ4 Финал) више нема ФУТУ! Вооохоо! Хттп: //bugzil.la/ 499292 У суштини текст је невидљив у трајању од 3 секунде, а затим враћа резервни фонт.Вебфонт ће се вјероватно учитати за ове три секунде, мада. .. надам се. .
  • ИЕ9 подржава ВОФФ и ТТФ и ОТФ( иако то захтијева ствар везивања за уграђивање - углавном се мута ако користите ВОФФ). ХОВЕВЕР! !!ИЕ9 има ФОУТ.:(
  • Вебкит има поклопац који чека на копно да покаже резервни текст након 0.5 секунде. Исто понашање као и ФФ, али 0.5с уместо 3с.

Ако је ово питање које је намењено дизајнерима,проблема као што је вебфонтлоадер, али то би било друго питање.Породна веза са Паулом Ирисхом иде у још детаље о овом питању

Имате ли нешто да додате објашњењу? Звучи у коментарима Желите прочитати више одговора из других тецх-савви Стацк Екцханге корисници? Проверите комплетну тему за дискусију овдје