Как заставить @font-face работать со средними и высокими настройками безопасности IE9

Я работаю в государственной сети, где настройками безопасности управляет ИТ. Мы также ограничены использованием IE9 на всех наших машинах. Я разрабатываю веб-приложения, используемые в содержании уроков (мы школа) для студентов, поэтому я стараюсь, чтобы страницы выглядели как можно более современными, чтобы не утомлять студентов. На наших машинах даже нет Helvetica, а мы обучаем графическому дизайну.

До недавнего времени я терял надежду, пытаясь заставить @font-face работать на страницах, которые я делаю для своей школы. То есть ... пока я не обнаружил Prezi. Если вы перейдете на http://prezi.com с параметрами безопасности IE9 и интернет-сайта, установленными на "средне-высокий", вы Увидим, что сайт по-прежнему волшебным образом загружает свой шрифт «PT Sans» на страницу прямо с сайта fonts.googleapis. Когда я обнаружил это, я буквально провел целые 24 часа, пытаясь реконструировать их метод, но не смог воспроизвести его на своем внешнем сервере, а затем провел следующие 24 часа, отслеживая разработчиков интерфейса Prezi, чтобы узнать, они могли выдать мне свою тайну (эй, это же правительство, у нас есть свободное время), конечно, все напрасно.

Проблеск надежды от того, что Прези разобрался с этим, заставил меня по-собачьи зациклиться на этом вопросе. Я перепробовал все хитрости и исправления в Интернете в течение года. Я все еще не могу заставить его работать.

Прези использует:

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>

для вызова шрифта со своей индексной страницы, которая возвращает это:

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot);
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/mqvGe0REcQNb_tfYSePALA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/jduSEW07_j4sIG_ERxiq4Q.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot);
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/1FvfuwkSjtdD3II7O-pVp_esZW2xOQ-xsNqO47m55DA.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v5/HXiERDIZdwFzjXlbcMq7XPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

А затем они просто используют его как обычный веб-шрифт, используя семейство шрифтов: «PT Sans»; !!!

Я могу воспроизвести все это в локальном html-файле, потому что параметры безопасности для страниц интрасети ниже, чем для обычных интернет-страниц. Но мне не разрешено использовать интрасеть для своих приложений.

Как Прези это удалось! Что они могли сделать, чтобы заставить его работать на своем сайте? Разработчики внешнего интерфейса Prezi не ответили на мои сообщения в Facebook, Twitter, электронной или голосовой почте. Программное обеспечение Prezi, очевидно, является проприетарным, но это веб-страница на их сайте, а не их программный продукт.

Мои ИТ-специалисты тоже не помогают, рассказывая мне то, что я уже знаю, например, «средне-высокие» настройки безопасности блокируют @font-face (но, очевидно, это не так, потому что Prezi сделал это). У них определенно есть рыба покрупнее. В качестве соски они подтолкнули Chrome и FF к моей кабинке. Чаще всего они имеют дело с вопросами типа «мой экран черный» или «какой у меня рабочий стол».

Поскольку мой вопрос настолько специфичен для моей среды, архитектуры и ситуации, это действительно выстрел в темноту. Я действительно потратил более 24 часов на реинжиниринг домашней страницы Prezi, чтобы понять это, но безрезультатно. Это была пустая трата времени.

Как они могли обойти настройки безопасности моей сети, если никакой другой веб-сайт, даже http://www.google.com/fonts отображает шрифты на наших машинах?

Примечание: прошу прощения за болтливость. Был час ночи и прошло 37 часов.


security font-face internet-explorer-9 prezi
person Kyle Ramirez    schedule 06.07.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, основная проблема в том, что IE не позволяет скачивать с другого домена. Чтобы обойти это, вы можете разместить шрифт на своем собственном сервере. Вот базовая настройка:

  1. Загрузите файл шрифта ttf (в шрифтах Google вы можете загрузить его, добавив шрифт в свою коллекцию, а затем щелкнув стрелку вниз в правом верхнем углу сцены «Использовать» коллекции)
  2. Перейдите к Font Squirrel и используйте их "генератор веб-шрифтов" для создания различных необходимы перестановки

  3. скопируйте код @font-face из верхней части удобной страницы примера, которую создает белка шрифта, и поместите его в свой файл css. Это будет выглядеть примерно так:

    @font-face {
    font-family: 'PTSans';
    src: url('PTSans-regular-webfont.eot');
    src: url('PTSans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('PTSans-regular-webfont.woff') format('woff'),
         url('PTSans-regular-webfont.ttf') format('truetype'),
         url('PTSans-regular-webfont.svg#PTSansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Загрузите лот, и вы должны быть готовы к работе.

Примечание. Это будет работать только для настройки безопасности «Средний-высокий» (и ниже). Если вы застряли с «Высоким», вы застряли со шрифтами Windows по умолчанию.

person botheredbybees    schedule 17.06.2014