Squeak.ru - шаблоны программирования

Как предотвратить мерцание веб-страниц, использующих Google Webfont API?

В моем веб-приложении (http://status.net/) для нашей новой темы по умолчанию мы используем Google Webfonts API (http://code.google.com/apis/webfonts/). В коллекции есть несколько очень хороших шрифтов, и они определенно улучшают внешний вид нашего программного обеспечения.

Однако, когда страница загружается, мы видим мерцание или вспышку. В браузерах Webkit область, в которой используются шрифты, остается пустой до тех пор, пока не будет загружен файл шрифта. В Firefox все это несколько раз перекомпоновывается.

Есть ли что-то, на что нам следует обратить внимание в API Webfont? Позаботиться о нашем запасном шрифте? Это нормально?

html fonts css
17.03.2011

  • Привет, Эван, это ответ на твой вопрос? Спасибо! 29.03.2011

Ответы:


1

Эван, Оливье написал статью о тестировании различных сервисов для шрифтов. . В Опере я ничего не заметил. Интересно, вы говорите о FOUC (Flash Of Unstyled Content). Хотя я не вижу импорта. Откуда берутся шрифты? CSS или JS?

17.03.2011
  • Мы используем Google Webfont CSS API. Мы видим FOUC в Firefox и в Chrome, без контента (но более или менее правильное расположение), затем появляются символы. Полезная ссылка на различные сервисы! 27.03.2011

    • 2

    Да, вы можете, используя загрузчик веб-шрифтов. В приведенном примере воспроизводится поведение Firefox во всех браузерах, что я считаю неудачным (а не тем, что вы ищете), но вы можете изменить это, например, чтобы скрыть текст до загрузки шрифта:

    .wf-loading p {
    visibility:hidden;
}

    PS: С нетерпением жду новой темы для StatusNet, текущая определенно заслуживает некоторых улучшений в плане удобства использования и дизайна ;)

    28.03.2011
  • Конечно, если вы стилизуете весь текст с помощью веб-шрифтов Google (а не только заголовки, например), это может быть проблематично. Пробовали ли вы других провайдеров? 29.03.2011
    • Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...