CSS fontface fallbackfont - PullRequest
       3

CSS fontface fallbackfont

5 голосов
/ 09 марта 2011

Когда я использую шрифт, браузеру требуется некоторое время, прежде чем шрифт будет загружен и обработан, пока не отобразится шрифт браузера по умолчанию. Я пытался указать Arial как fallbackfont и как общий шрифт HTML / BODY, но это не меняет проблему.

есть ли способ избежать этого?

@font-face {
font-family: 'StrukturProBold';
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot');
src: url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.eot?iefix') format('eot'),
     url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.woff') format('woff'),
     url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.ttf') format('truetype'),
     url('fonts/strukturpro_bold_ubasic/StrukturPro-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
 font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}
h1 {
 font-family: "StrukturProBold", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
}

Ответы [ 2 ]

9 голосов
/ 09 марта 2011

Это называется «Flash of Un-styled Text» (или FOUT).Вы не увидите его в браузерах Webkit, потому что они скрывают текст, пока шрифт не будет загружен.Если вы хотите быть более агрессивным, заставляя другие браузеры скрывать FOUT, вы можете сделать это с помощью некоторого предварительно написанного JavaScript.

Пол Ирландский объясняет все это здесь:

http://paulirish.com/2009/fighting-the-font-face-fout/

Вот код, который вам нужен:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['yourfont'],
    urls : ['http://example.com/yourfontdeclaration.css']
  }
});
</script>

и немного CSS:

h2 {
  font-family: 'yourfont', helvetica, sans-serif;
}
.wf-loading h2 { 
  visibility: hidden; 
}
2 голосов
/ 09 марта 2011

Если у посетителя не установлен специальный шрифт в его системе, браузер должен загрузить его так же, как и файл изображения, или связанную таблицу стилей или файл .js.

Прочитав комментарии выше, вы, вероятно, уже делаете все возможное, что можете. StrukturProBold - это простой шрифт без засечек.

Вы можете расширить свой список дополнительных шрифтов, хотя, возможно, Arial и Helvetica не так хороши, как, например, Verdana или Trebuchet

font-family: "StrukturProBold", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...