Arhn - архитектура программирования

Использование @font-face приводит к отображению разных символов в Safari

Я добавил шрифт на свой сайт, используя этот код:

@font-face {
    font-family: 'ChunkFive-Roman';
    src: url('/css/font/ChunkFive-Roman.eot') format('eot'), 
         url('/css/font/ChunkFive-Roman.otf')  format('opentype'),
         url('/css/font/ChunkFive-Roman.woff') format('woff'), 
         url('/css/font/ChunkFive-Roman.ttf')  format('truetype'),
         url('/css/font/ChunkFive-Roman.svg#ChunkFive-Roman') format('svg');
}

Это нормально работает на XP во всех браузерах, кроме Safari:

введите здесь описание изображениявведите здесь описание изображения

Почему это так и, что более важно, как я могу это исправить?

Эти шрифты доступны здесь.

fonts css safari font-face
16.04.2013

Ответы:


1

нашел статью по этому вопросу: and_the_css_font_face_declaration.xhtml" rel="nofollow">WEBKIT (SAFARI 3.1) И ДЕКЛАРАЦИЯ CSS @FONT-FACE

Раздел спецификаций CSS для @font-face очень специфичен — шрифты должны выбираться на основе широкого набора критериев, помещенных в сам блок объявления @font-face. Различные текстовые атрибуты CSS могут быть определены в объявлении @font-face, а затем они будут проверяться, когда гарнитура упоминается позже в CSS. Например, если у меня есть два объявления @font-face для семейства Diavlo — одно для обычного текста и одно для более тяжелой версии шрифта, — то позже я использую Diavlo в атрибуте font-family:, он должен ссылаться на базовый шрифт Diavlo, определенный в первом @font-face. Однако, если бы я сделал то же самое, но также указал большой вес шрифта:, тогда он должен использовать более тяжелую версию Diavlo. Чтобы поместить этот пример в код:

@font-face {
  font-family: 'Diavlo';
  src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}

@font-face {
  font-family: 'Diavlo';
  font-weight: 900;
  src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diavlo';
  font-weight: 900;
}

div#content {
  font-family: 'Diavlo';
}

Как видите, в заголовках должен использоваться шрифт, определенный в Diavlo_Black.otf, а в основном тексте должен использоваться Diavlo_Book.otf. Однако в WebKit это не работает — он полностью игнорирует любой атрибут, кроме font-family: и src: в объявлении @font-face! Полностью игнорирует их! Мало того — не только это — он игнорирует все, кроме последнего @font-face для данного семейства шрифтов: строка атрибута!

Подразумевается, что для того, чтобы @font-face работал так, как он в настоящее время реализован в WebKit (и, следовательно, в Safari 3.1), я должен объявить полностью воображаемые, несуществующие семейства типов, чтобы удовлетворять только WebKit. Вот метод, который я использовал в тех местах, где сейчас реализую @font-face:

@font-face {
  font-family: 'Diavlo Book';
  src: url(./Diavlo/Diavlo_Book.otf) format("opentype");
}

@font-face {
  font-family: 'Diavlo Black';
  src: url(./Diavlo/Diavlo_Black.otf) format("opentype");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Diavlo Black';
}

div#content {
  font-family: 'Diavlo Book';
}
16.04.2013
  • Спасибо, чувак, ты спас мой день! Если вы добавите решение (т.е. не только ссылку) в ответ, я могу принять его;) 17.04.2013
  • Как это ответило на вопрос? Он просто копирует часть статьи неизвестного происхождения и даты, не предполагая, какое отношение она имеет к проблеме. 17.04.2013
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..