Как установить вес и стили с помощью декларации @ font-face - Smashing Magazine
Воскресенье, 29.12.2013, 07:55
Заработок в интернете для новичков
Главная | Регистрация | Вход Приветствую Вас Гость | RSS
МЕНЮ САЙТА
КАТЕГОРИИ раздела
  • Истории успеха
  • Оптимизация
  • B2b
  • Хлебные крошки
  • SEO
  • Социальные сети
  • Антивирус
  • Семантическое ядро
  • Реклама
  • Новости
  • Новости
    Оптимизация текстов под Яндекс и Гугл за счет их форматирования
    Обновлено: 17 февраля 2017 Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу продолжить тему, начатую в статье « Seo оптимизация текстов для коммерческого сайта ». В начале

    301 редирект в htaccess для SEO оптимизации страниц сайта
    Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Если говорить вкратце, то 301 редирект очень часто используют, когда необходимо исключить возникновение дублей, а также сохранить уже имеющийся

    Задача - дискретная оптимизация
    Задачи дискретной оптимизации - это задачи нахождения экстремума функции, заданной на дискретном ( чаще всего - конечном) множестве точек. Если область определения функции состоит из конечного числа точек,

    Команды для оптимизации cs go
    У многих людей слабое железо, и каждый второй хочет ускорить производительность своего компьютера и поднять FPS в играх CS:GO, CS:S, Minecraft и других играх. В этой статье я хочу раскрыть кучу секретов

    Настраиваем графику Assassin's Creed Unity
    Наконец-то вышла долгожданная Assassin’s Creed Unity, расширив возможности используемого в Assassin’s Creed IV: Black Flag движка AnvilNext по части стелс-экшна, игровой механики и почти безупречного воссоздания

    Антикризисная стратегия корпорации (компании) - АЛЬТ-Маркетинг - Альтернативные Маркетинговые Технологии
    АЛЬТ-Маркетинг - Альтернативные Маркетинговые Технологии Главная > Библиотека > Стратегическое планирование, разработка стратегии, корпоративные и функциональные стратегии

    Оптимизация SQL-запросов
    Метки статей: 100mbru , CentOS , cms , drupal , joomla , LAMP , linux , mysql , nicru , Open-Source , Red Hat , seo , Typo3 , ubuntu , авто , администрирование , алгоритмы , алкоголь

    Методы и способы оптимизации налогообложения на предприятии в 2017 году
    Для каждой компании основной задачей является повышение рентабельности своего бизнеса. Общеизвестно, что значительный размер  затрат предприятия составляют налоговые платежи. Ежегодно политика налоговой

    Seo
    Как я и говорил, начинаю публикации в блоге со статей для новичков, так сказать, потрогаем азы… SEO  – это просто аббревиатура, которая в английском языке произносится и пишется как Search Engines

    Оптимизация производительности MySQL на ОС Linux
    Существует множество факторов, влияющих на производительность MySQL в Azure, которые зависят и от выбора виртуального оборудования, и от конфигурации программного обеспечения. Эта статья посвящена оптимизации

    Праздники России
    Статистика
    Rambler's Top100




    Онлайн всего: 0
    Гостей: 0
    Пользователей: 0

    Как установить вес и стили с помощью декларации @ font-face

    1. Об авторе Лаура Франц является профессором в UMass Dartmouth, где она преподает широкий спектр классов...
    2. Дальнейшее чтение на SmashingMag:
    3. Уникальные имена семейства шрифтов, нормальные веса и стили
    4. Стилизация текста с использованием этого метода
    5. Убедитесь, что веса и стили соответствуют!
    6. Использование элементов <em> и <strong>
    7. Проблема: если резервный шрифт загружается, веса и стили будут потеряны
    8. Короткая версия
    9. Стиль Связывание
    10. Стилизация текста с использованием стилей
    11. Опять же, убедитесь, что веса и стили совпадают!
    12. Бонус: если запасной шрифт загружается, веса и стили будут сохранены
    13. Проблема: Internet Explorer 7 и 8 могут применять до четырех весов и стилей к одному имени семейства шрифтов
    14. Проблема: вылетает браузер на BlackBerry и iPad 1
    15. Короткая версия
    16. Уникальные имена семейства шрифтов, соответствующие веса и стили
    17. Стилизация текста с использованием комбинированного метода
    18. Опять же, убедитесь, что веса и стили совпадают!
    19. Проблема: использование элементов <em> и <strong>
    20. Бонус: если запасной шрифт загружается, веса и стили будут сохранены
    21. Короткая версия
    22. Убедитесь, что ваш вес и стили работают

    Об авторе

    Лаура Франц является профессором в UMass Dartmouth, где она преподает широкий спектр классов шрифтов - в том числе класс веб-типографии в The Graduate… Подробнее о Лоре ...

    Если на вашем сайте есть люди, они, вероятно, либо быстро бегают, ищут что-то, либо нашли то, что искали, и хотят прочитать это как можно проще. В любом случае, сохранение читабельности текста поможет им достичь своей цели.

    Если на вашем сайте есть люди, они, вероятно, либо быстро бегают, ищут что-то, либо нашли то, что искали, и хотят прочитать это как можно проще. В любом случае, сохранение читабельности текста поможет им достичь своей цели.

    Жирная и курсивная помощь в организации контента

    Несколько месяцев назад я написал статью « Избежание поддельных весов и стилей с помощью веб-шрифтов Google Я закончил статью, показав, что веса и стили являются важным элементом UX при настройке текста. Жирные и курсивные формы шрифта помогают людям просматривать ваш сайт. Они добавляют акцент - как сильный, так и тонкий - который может помочь посетителям понять организацию контента, даже не начав его читать.

    Веса и стили являются важным элементом UX
    Веса и стили являются важным элементом UX. Жирный и курсив поможет читателям увидеть структуру и более эффективно просмотреть текст (слева). Тот же текст без жирного или курсивного (справа) больше напоминает повествование.

    Дальнейшее чтение на SmashingMag:

    В этой статье мы начнем с того места, где остановились. Поскольку веса и стили помогают нашим посетителям читать наш контент, мы должны убедиться, что они работают! А заставить вес и стили работать правильно с помощью объявления @ font-face может быть немного сумасшедшим. Давайте рассмотрим два популярных подхода к настройке весов и стилей с помощью объявления @ font-face. Я покажу вам, почему они не являются лучшими решениями, и покажу вам третий, более эффективный подход.

    Уникальные имена семейства шрифтов, нормальные веса и стили

    Если вы использовали один из FontSquirrel Удивительные наборы @ font-face, вы знакомы с этим подходом к настройке весов и стилей. CSS, предоставляемый в каждом наборе, использует уникальное имя семейства шрифтов для каждого веса и стиля и устанавливает вес и стиль в объявлении @ font-face как нормальные.

    Например, синтаксис для Ubuntu Italic и Ubuntu Bold выглядит следующим образом:

    @ font-face {font-family: 'UbuntuItalic'; src: url ('Ubuntu-RI-webfont.eot'); Формат src: url ('Ubuntu-RI-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Ubuntu-RI-webfont.woff') ('woff'), url ('Ubuntu- Формат RI-webfont.ttf ') (' trueetype '), формат url (' Ubuntu-RI-webfont.svg # UbuntuItalic ') (' svg '); Вес шрифта: нормальный; стиль шрифта: нормальный; } @ font-face {font-family: 'UbuntuBold'; src: url ('Ubuntu-B-webfont.eot'); формат src: url ('Ubuntu-B-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Ubuntu-B-webfont.woff') ('woff'), url ('Ubuntu- B-webfont.ttf ') формат (' truetype '), url (' Ubuntu-B-webfont.svg # UbuntuBold ') формат (' svg '); Вес шрифта: нормальный; стиль шрифта: нормальный; }

    Обратите внимание, что имена семейства шрифтов уникальны, причем каждое имя семейства шрифтов обращается к соответствующим файлам веб-шрифтов. Например, UbuntuItalic обращается к Ubuntu-RI-webfont.woff, а UbuntuBold обращается к Ubuntu-B-webfont.woff.

    Также обратите внимание на то, что font-weight и font-style для обоих объявлений @ font-face установлены в нормальное состояние.

    Стилизация текста с использованием этого метода

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

    .u400 {font-family: 'UbuntuRegular', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; } .u400i {font-family: 'UbuntuRegularItalic', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; } .u700 {font-family: 'UbuntuBold', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; } .u700i {font-family: 'UbuntuBoldItalic', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; }

    Ubuntu: обычный, курсив, полужирный и полужирный курсив в Windows 7 в Internet Explorer 8 (вверху) и в Mac OS X в Chrome 23 (внизу)
    Ubuntu: обычный, курсив, полужирный и полужирный курсив в Windows 7 в Internet Explorer 8 (вверху) и в Mac OS X в Chrome 23 (внизу). Уникальные имена семейства шрифтов с нормальным весом и стилями (как FontSquirrel) работают нормально.

    Убедитесь, что веса и стили соответствуют!

    Поскольку в объявлениях @ font-face для весов и стилей установлены нормальные значения, важно сохранять весовые коэффициенты и стили в качестве нормальных при стилизации текста. В противном случае жирный шрифт может быть выделен двойным шрифтом (некоторые браузеры добавляют жирный шрифт к уже выделенному веб-шрифту), а курсив может быть двойным курсивом (некоторые браузеры добавляют курсивный стиль к уже выделенному веб-шрифту).

    Например, допустим, мы неправильно установили стиль шрифта курсивом, а вес шрифта - 700 (жирным шрифтом) в наших соответствующих классах:

    .u400 {font-family: 'UbuntuRegular', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; } .u400i {font-family: 'UbuntuRegularItalic', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: курсив; } .u700 {font-family: 'UbuntuBold', arial, без засечек; вес шрифта: 700; стиль шрифта: нормальный; } .u700i {font-family: 'UbuntuBoldItalic', arial, без засечек; вес шрифта: 700; стиль шрифта: курсив; }

    Шрифты будут неправильно отображаться в браузерах Mac OS X и iPad Safari.

    При использовании нормальных весов и стилей в объявлении @ font-face также присвойте текстовым элементам нормальные веса и стили
    При использовании нормальных весов и стилей в объявлении @ font-face также присвойте текстовым элементам нормальные веса и стили. В противном случае ваш текст может заканчиваться двойным жирным шрифтом и двойным курсивом. Если вы установите текстовые элементы жирным шрифтом или курсивом, то Ubuntu Italic, Bold и Bold Italic не будут выделяться двойным жирным шрифтом или двойным курсивом в Windows 7 в Internet Explorer 8 (вверху). Но посмотрите, что происходит в Mac OS X в Firefox 17 и на iPad 3 с iOS 5.1 в Safari (внизу) - да!

    Использование элементов <em> и <strong>

    В то время как <em> и <strong> могут быть стилизованы для передачи акцента и важности различными способами, они часто используются в их формах по умолчанию: для <em> задан курсивный текст, а для <strong> выделен жирный текст.

    Например, абзац ниже выглядит так:

    p {font-family: 'UbuntuRegular', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; }

    А элементы <em> и <strong> остаются в своих состояниях по умолчанию:

    em {font-style: italic; } strong {font-weight: bold; }

    Применение <em> и <strong> в их состояниях по умолчанию приводит к выделению курсивом и выделением жирным шрифтом
    Применение <em> и <strong> в их состояниях по умолчанию приводит к выделению курсивом и выделением жирным шрифтом.

    В результате получается искусственный курсив и искусственный жирный шрифт. Зачем? Потому что для абзаца установлено обычное Ubuntu, а для веса и стиля - нормальное. Когда применяется элемент <em>, текст остается обычным Ubuntu, но наклоняется, чтобы выглядеть как курсив. Обратите внимание на угловой «e» и двухъярусный «a». Когда применяется элемент <strong>, текст остается обычным Ubuntu, но растягивается, чтобы выглядеть жирным. Обратите внимание, что буква «е» больше не является монолинейной - стороны буквы выглядят толще, чем верх и низ буквы.

    Мы можем решить эту проблему, убедившись, что элементы <em> и <strong> используют правильное имя семейства шрифтов. Например, абзац ниже продолжает выглядеть так:

    p {font-family: 'UbuntuRegular', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; }

    И элементы <em> и <strong> разработаны так, чтобы использовать правильные имена соответствующих семейств шрифтов:

    em {font-family: 'UbuntuRegularItalic', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; } strong {font-family: 'UbuntuBold', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; }

    Обратите внимание, что font-weight и font-style для <em> и <strong> установлены в нормальное состояние. Это нелогично, но необходимо, чтобы текст не заканчивался двойным курсивом или двойным жирным шрифтом.

    Использование правильных имен семейства шрифтов - и установка весов и стилей на нормальное - приводит к истинному курсиву и истинному жирному шрифту
    Использование правильных имен семейства шрифтов - и установка весов и стилей на нормальное - приводит к истинному курсиву и истинному жирному шрифту.

    В результате получился настоящий курсив и жирный шрифт. Зачем? Поскольку в качестве абзаца установлено значение Ubuntu Regular, для элемента <em> установлено значение Ubuntu Italic, а для элемента <strong> установлено значение Ubuntu Bold, а для всех весов и стилей задано значение Normal.

    Проблема: если резервный шрифт загружается, веса и стили будут потеряны

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

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

    Если веб-шрифт не загружается, то резервный шрифт (здесь Times New Roman) будет загружаться с нормальным весом и стилем, что подрывает иерархию и удобочитаемость
    Если веб-шрифт не загружается, то резервный шрифт (здесь Times New Roman) будет загружаться с нормальным весом и стилем, что подрывает иерархию и удобочитаемость. Помните, что мы установили все веса и стили в нормальное состояние, когда мы стилизовали элементы!

    Короткая версия

    Использование уникальных имен семейства шрифтов в сочетании с установкой шрифта-веса и стиля шрифта в обычный режим не прощает. Несоответствие весов и стилей может легко привести либо к выделению курсивом, либо к полужирному шрифту, либо к двойному курсиву и двойному жирному шрифту. Если веб-шрифт не загружается, то результат не будет курсивом или жирным шрифтом! Таким образом, этот подход к настройке весов и стилей с помощью объявления @ font-face не является лучшим решением.

    Стиль Связывание

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

    Например, при использовании связывания стилей синтаксис для Ubuntu Italic и Ubuntu Bold будет выглядеть следующим образом:

    @ font-face {font-family: 'Ubuntu'; src: url ('Ubuntu-RI-webfont.eot'); Формат src: url ('Ubuntu-RI-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Ubuntu-RI-webfont.woff') ('woff'), url ('Ubuntu- Формат RI-webfont.ttf ') (' trueetype '), формат url (' Ubuntu-RI-webfont.svg # UbuntuItalic ') (' svg '); вес шрифта: 400; стиль шрифта: курсив; } @ font-face {font-family: 'Ubuntu'; src: url ('Ubuntu-B-webfont.eot'); формат src: url ('Ubuntu-B-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Ubuntu-B-webfont.woff') ('woff'), url ('Ubuntu- B-webfont.ttf ') формат (' truetype '), url (' Ubuntu-B-webfont.svg # UbuntuBold ') формат (' svg '); вес шрифта: 700; стиль шрифта: нормальный; }

    Обратите внимание, что имена семейств шрифтов одинаковы, независимо от того, к какому файлу веб-шрифтов обращаются. Например, Ubuntu обращается к Ubuntu-RI-webfont.woff, а Ubuntu также обращается к Ubuntu-B-webfont.woff. Как это работает?

    Обратите внимание, что font-weight и font-style для каждого объявления @ font-face установлены в соответствии с весом и стилем файла веб-шрифтов, к которому осуществляется доступ. Ubuntu, который обращается к файлу веб-шрифта курсивом, имеет стиль шрифта: курсив. Ubuntu, который обращается к файлу полужирного веб-шрифта, имеет шрифт-вес: 700.

    В этом методе веса и стили в объявлениях @ font-face действуют как «маркеры». Когда браузер встречает эти веса и стили в других местах CSS, он знает, какое объявление @ font-family использовать и какие файлы веб-шрифтов использовать. доступ.

    Стилизация текста с использованием стилей

    Для стилизации текста с помощью этого метода используйте одно и то же семейство шрифтов для всех версий шрифта. Установите веса и стили, чтобы запускать правильные файлы веб-шрифтов, к которым должен обращаться браузер. Если вы хотите курсивную версию шрифта, убедитесь, что вы установили font-style: italic. Например, заголовки Обычный, Обычный курсив, Полужирный и Полужирный курсив ниже задаются с классами. Классы оформлены так:

    .u400 {font-family: 'Ubuntu', arial, без засечек; вес шрифта: 400; стиль шрифта: нормальный; } .u400i {font-family: 'Ubuntu', arial, без засечек; вес шрифта: 400; стиль шрифта: курсив; } .u700 {font-family: 'Ubuntu', arial, без засечек; вес шрифта: 700; стиль шрифта: нормальный; } .u700i {font-family: 'Ubuntu', arial, без засечек; вес шрифта: 700; стиль шрифта: курсив; }

    Ubuntu: обычный, курсив, полужирный и полужирный курсив в Windows 7 в Internet Explorer 8 (вверху) и в Mac OS X в Chrome 23 (внизу)
    Ubuntu: обычный, курсив, полужирный и полужирный курсив в Windows 7 в Internet Explorer 8 (вверху) и в Mac OS X в Chrome 23 (внизу). Использование связывания стилей для установки веса и стиля работает нормально.

    Опять же, убедитесь, что веса и стили совпадают!

    Поскольку вес и стиль используются для «запуска» правильного объявления @ font-face, важно установить веса и стили, соответствующие тем, которые используются в объявлениях @ font-face. В качестве бонуса, когда правила по умолчанию для весов и стилей применяются браузерами - например, курсивом для <em> и жирным шрифтом для <strong> - тогда автоматически загружаются правильные шрифты (если ваш шрифт имеет жирный и курсивный вариант), потому что правила по умолчанию также вызовут правильное объявление @ font-face.

    Когда в браузерах применяются правила по умолчанию для весов и стилей - например, курсив для <em> и полужирный для <strong> - правильные шрифты будут загружаться автоматически (если ваш шрифт имеет жирный и курсивный вариант)
    Когда в браузерах применяются правила по умолчанию для весов и стилей - например, курсив для <em> и полужирный для <strong> - правильные шрифты будут загружаться автоматически (если ваш шрифт имеет жирный и курсивный вариант). Опять же, использование связывания стилей для установки веса и стиля работает нормально.

    Бонус: если запасной шрифт загружается, веса и стили будут сохранены

    В отличие от первого подхода, установка весов и стилей с помощью связывания стилей означает, что веса и стили будут сохраняться даже в том случае, если веб-шрифт не загружается. Зачем? Потому что все веса и стили были установлены правильно (например, не нормально) при стилизации текста.

    Примечание. Если веб-шрифт не загружается, резервный шрифт (здесь Times New Roman) все равно будет обеспечивать иерархию - полужирный шрифт и курсив останутся без изменений. Помните, что мы установили все веса и стили в соответствии с веб-шрифтами при стилизации элементов!

    Но у стиля связывания есть свои проблемы ...

    Проблема: Internet Explorer 7 и 8 могут применять до четырех весов и стилей к одному имени семейства шрифтов

    Связывание стилей работает - если вы не используете более четырех весов и стилей (и если человек, читающий вашу веб-страницу, не один из восьми человек, которые все еще используют Internet Explorer (IE) 7 или 8). Если вы используете более четырех весов и стилей на веб-сайте, то IE 7 и 8 преобразуют все легкие и средние веса в нормальные, а все черные и тяжелые - в полужирный - так что вы потеряете часть тщательно выстроенного текста.

    IE 7 и 8 не могут применять более четырех весов и стилей к одному имени семейства шрифтов
    IE 7 и 8 не могут применять более четырех весов и стилей к одному имени семейства шрифтов. Ubuntu имеет восемь весов и стилей. Если вы использовали все восемь с именем семейства шрифтов Ubuntu, то Light, Light Italic, Medium и Medium Italic конвертируются в Regular и Regular Italic.

    Проблема: вылетает браузер на BlackBerry и iPad 1

    Независимо от того, насколько хорошо загружаются ваши шрифты, в случае сбоя страницы в браузере люди не смогут увидеть ваш контент! И на момент написания этой статьи веб-страницы, использующие стиль ссылок, регулярно приводят к сбою браузеров BlackBerry 9900. Они также ломают браузеры iPad 1 в 100% случаев.

    Короткая версия

    Использование стилей ссылок кажется более щадящим. Это значительно снижает вероятность того, что текст будет выделен как курсивом и полужирным шрифтом, или двойным курсивом и двойным жирным шрифтом. Кроме того, если веб-шрифт не загружается, текст сохранит как стиль, так и вес. Но если вы используете более четырех весов и стилей, текст не будет правильно отображаться в IE 7 и 8. Кроме того, связывание стилей приводит к сбою браузеров на устройствах BlackBerry и iPad 1. Таким образом, этот подход к настройке весов и стилей с помощью объявления @ font-face не является лучшим решением в настоящее время (хотя будущее - когда IE 7 и 8, BlackBerry 9900 и iPad 1 все более не функционируют - выглядит ярким!).

    Уникальные имена семейства шрифтов, соответствующие веса и стили

    Третий - и в настоящее время самый эффективный - способ установки весов и стилей - это объединение первых двух методов. Если вы использовали FontDeck (сервис закрыт декабрь / 16) для веб-шрифтов, то вы будете знакомы с этим подходом.

    Используйте уникальные имена семейства шрифтов - что позволяет IE показывать все нужные вам веса и стили. Кроме того, используйте соответствующие веса и стили (например, не устанавливайте веса и стили на нормальный уровень), что позволит сохранить веса и стили без изменений в случае сбоя веб-шрифта.

    Например, синтаксис для Ubuntu Italic и Ubuntu Bold должен выглядеть следующим образом:

    @ font-face {font-family: 'UbuntuItalic'; src: url ('Ubuntu-RI-webfont.eot'); Формат src: url ('Ubuntu-RI-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Ubuntu-RI-webfont.woff') ('woff'), url ('Ubuntu- Формат RI-webfont.ttf ') (' trueetype '), формат url (' Ubuntu-RI-webfont.svg # UbuntuItalic ') (' svg '); вес шрифта: 400; стиль шрифта: курсив; } @ font-face {font-family: 'UbuntuBold'; src: url ('Ubuntu-B-webfont.eot'); формат src: url ('Ubuntu-B-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Ubuntu-B-webfont.woff') ('woff'), url ('Ubuntu- B-webfont.ttf ') формат (' truetype '), url (' Ubuntu-B-webfont.svg # UbuntuBold ') формат (' svg '); вес шрифта: 700; стиль шрифта: нормальный; }

    Обратите внимание, что имена семейства шрифтов уникальны, причем каждое имя семейства шрифтов обращается к соответствующим файлам веб-шрифтов. Например, UbuntuItalic обращается к Ubuntu-RI-webfont.woff, а UbuntuBold обращается к Ubuntu-B-webfont.woff.

    Также обратите внимание на вес и стиль: font-weight и font-style для каждого объявления @ font-face устанавливаются так, чтобы соответствовать весу и стилю файла веб-шрифтов, к которому осуществляется доступ. UbuntuItalic, который обращается к файлу курсивного веб-шрифта, имеет стиль шрифта: курсив. UbuntuBold, который обращается к файлу полужирного веб-шрифта, имеет шрифт-вес: 700.

    Стилизация текста с использованием комбинированного метода

    Чтобы стилизовать текст с помощью этого метода, используйте уникальные имена семейств шрифтов и установите веса и стили, соответствующие тем, которые используются в объявлениях @ font-face. Например, заголовки Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Bold и Bold Italic ниже устанавливаются вместе с классами. Классы оформлены так:

    .u300 {font-family: 'UbuntuLight', arial, без засечек; вес шрифта: 300; стиль шрифта: нормальный; } .u300i {font-family: 'UbuntuLightItalic', arial, без засечек; вес шрифта: 300; стиль шрифта: курсив; } .u400 {font-family: 'UbuntuRegular', arial, без засечек; вес шрифта: 400; стиль шрифта: нормальный; } .u400i {font-family: 'UbuntuRegularItalic', arial, без засечек; вес шрифта: 400; стиль шрифта: курсив; } .u700 {font-family: 'UbuntuMedium', arial, без засечек; вес шрифта: 500; стиль шрифта: нормальный; } .u700i {font-family: 'UbuntuMediumItalic', arial, без засечек; вес шрифта: 500; стиль шрифта: курсив; } .u900 {font-family: 'UbuntuBold', arial, без засечек; вес шрифта: 700; стиль шрифта: нормальный; } .u900i {font-family: 'UbuntuBoldItalic', arial, без засечек; вес шрифта: 700; стиль шрифта: курсив; }

    Комбинируя уникальные имена семейств шрифтов с соответствующими весами и стилями, все восемь весов и стилей Ubuntu будут работать - даже в Windows 7 в IE 8
    Комбинируя уникальные имена семейств шрифтов с соответствующими весами и стилями, все восемь весов и стилей Ubuntu будут работать - даже в Windows 7 в IE 8. И браузеры BlackBerry и iPad 1 не будут аварийно завершать работу.

    Опять же, убедитесь, что веса и стили совпадают!

    Хотя использование уникальных имен семейства шрифтов означает, что нам больше не нужны веса и стили для «запуска» правильного объявления @ font-face, важно установить соответствие всех весов и стилей. Применение весов и стилей к текстовым элементам сохранит их в случае отказа веб-шрифта. Кроме того, поскольку веса и стили совпадают, текст не будет заканчиваться ни двойным жирным шрифтом, ни двойным курсивом, ни искусственным жирным шрифтом, либо искусственным курсивом.

    Проблема: использование элементов <em> и <strong>

    Использование уникальных имен семейства шрифтов возвращает более раннюю проблему: заставить элементы <em> и <strong> работать должным образом. Стилизация по умолчанию для этих элементов приведет к выделению текста курсивом и выделением жирным шрифтом.

    Например, три абзаца ниже имеют такой стиль:

    p.light {font-family: 'UbuntuLight', arial, без засечек; вес шрифта: 300; стиль шрифта: нормальный; } p {font-family: 'UbuntuRegular', arial, без засечек; Вес шрифта: нормальный; стиль шрифта: нормальный; } p.medium {font-family: 'UbuntuMedium', arial, без засечек; вес шрифта: 500; стиль шрифта: нормальный; }

    А элементы <em> и <strong> остаются в своих состояниях по умолчанию:

    em {font-style: italic; } strong {font-weight: bold; }

    Применение <em> и <strong> в их состояниях по умолчанию приведет к выделению курсивом и (обычно) выделением жирным шрифтом
    Применение <em> и <strong> в их состояниях по умолчанию приведет к выделению курсивом и (обычно) выделением жирным шрифтом.

    Результатом является искусственный курсив и искусственный жирный шрифт (когда он применяется). Зачем? Потому что мы используем уникальные имена семейства шрифтов. Давайте посмотрим на средний абзац. Он установлен на Ubuntu Regular, с весом и стилем для соответствия (вес: нормальный и стиль: нормальный). Когда применяется элемент <em>, текст остается обычным Ubuntu, но наклоняется, чтобы выглядеть как курсив. Когда применяется элемент <strong>, текст остается обычным Ubuntu, но растягивается, чтобы выглядеть жирным.

    Мы можем исправить жирный текст, убедившись, что элемент <strong> использует правильное имя семейства шрифтов, вес и стиль:

    strong {font-family: 'UbuntuBold', arial, без засечек; вес шрифта: 700; стиль шрифта: нормальный; }

    <Em> немного сложнее исправить. Мы можем установить его на Ubuntu Regular Italic и использовать соответствующий вес и стиль:

    em {font-family: 'UbuntuRegularItalic', arial, без засечек; вес шрифта: 400; стиль шрифта: курсив; }

    Установка для <em> значения UbuntuRegularItalic и <strong> значения UbuntuBold приведет к выделению курсива слишком тяжелым для светлого текста и слишком легким для среднего текста
    Установка для <em> значения UbuntuRegularItalic и <strong> значения UbuntuBold приведет к выделению курсива слишком тяжелым для светлого текста и слишком легким для среднего текста.

    Результатом является жирный шрифт, выделенный курсивом и непротиворечивый, независимо от веса текста абзаца. Это может быть хорошо для элемента <strong>, но элемент <em> выглядит немного неуместным как для легкого, так и для среднего текста.

    Единственный способ исправить это - создать множество классов для элемента <em>, например:

    em {font-family: 'UbuntuRegularItalic', arial, без засечек; вес шрифта: 400; стиль шрифта: курсив; } em.light {font-family: 'UbuntuLightItalic', arial, без засечек; вес шрифта: 300; стиль шрифта: курсив; } em.medium {font-family: 'UbuntuMediumItalic', arial, без засечек; вес шрифта: 500; стиль шрифта: курсив; }

    Создание трех версий элемента <em> (em, em
    Создание трех версий элемента <em> (em, em.light, em.medium) даст курсив, который «соответствует» весу текста.

    Это приведет к курсиву, который соответствует весу текста в каждом абзаце. Это создает гораздо лучшую иерархию, но подрывает красоту каскадных таблиц стилей и простоту использования одного элемента <em>.

    Бонус: если запасной шрифт загружается, веса и стили будут сохранены

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

    Если веб-шрифт не загружается, резервный шрифт (здесь Times New Roman) все равно будет обеспечивать иерархию - полужирный шрифт и курсив останутся без изменений
    Если веб-шрифт не загружается, резервный шрифт (здесь Times New Roman) все равно будет обеспечивать иерархию - полужирный шрифт и курсив останутся без изменений. Но поскольку резервные шрифты обычно не имеют «лишних» весов (таких как «Светлый», «Средний» и «Черный»), некоторые весовые коэффициенты вернутся в «Нормальный» и «Жирный».

    Короткая версия

    Использование уникальных имен семейства шрифтов и установка соответствующих им весов и стилей (например, не устанавливая их в нормальное состояние) является наиболее эффективным способом получения весов и стилей для работы с объявлением @ font-face. Требуется дополнительный шаг (т.е. установка и использование уникальных имен семейства шрифтов - даже с такими элементами, как <em> и <strong>), чтобы избежать ложного курсива и искусственного полужирного шрифта, но решение действительно снижает вероятность двойного курсива и двойного курсива -жирный текст. Кроме того, если веб-шрифт не загружается, текст будет сохранять стиль и вес. Наконец, текст будет правильно отображаться в IE 7 и 8 (даже если вы используете более четырех весов и стилей), и ваши страницы не будут зависать в браузерах на устройствах BlackBerry 9900 и iPad 1.

    Убедитесь, что ваш вес и стили работают

    Веса и стили помогают посетителям читать контент на вашем сайте. Итак, убедитесь, что ваши веса и стили загружаются правильно - для IE 8, Chrome, Mac OS X Firefox или iPad и правильно ли загружается веб-шрифт (или посетители видят запасной шрифт).

    При выборе метода для вашего сайта, задайте себе два вопроса:

    1. Буду ли я использовать более четырех весов и стилей на сайте?
    2. Являются ли пользователи BlackBerry и iPad 1 частью моей целевой аудитории?

    Если ответ на оба вопроса «нет», тогда используйте стиль ссылок. Это элегантно и прощающе.

    Если ответ на один из вопросов «да», используйте комбинированный метод. В настоящее время единственный способ убедиться, что ваши веса и стили работают в кросс-браузерном режиме, - это использовать уникальные имена семейств шрифтов в сочетании с соответствующими весами и стилями (и, конечно, убедиться, что ваш шрифт имеет жирный и курсивный вариант). Это может звучать как рутинная работа, требующая дополнительной осторожности и набора текста (в конце концов, UbuntuRegularItalic печатать дольше, чем Ubuntu), но, как и большинство типографских деталей, лучшие результаты требуют времени и усилий . Четное Typekit , который использует JavaScript для обработки тонкостей веб-шрифтов, требует специфических для вариаций имен семейств шрифтов для поддержки более старых версий IE.

    После того, как IE 7 и 8, браузеры BlackBerry 9900 и iPad 1 перестанут существовать, достаточно одного лишь стилевого связывания, чтобы выполнить работу. Но по состоянию на 28 января 2013 года StatCounter сообщает, что только IE 7 и 8 использовались для 12,3% из 45 миллиардов просмотров страниц, собранных с ноября 2012 года по январь 2013 года. Информация о мобильных браузерах не ясна, но как минимум 1 из 8 посетителей все еще нуждается в нас, чтобы пройти лишнюю милю , Итак, на данный момент у нас есть некоторые дополнительные печатать.

    Дополнительные ресурсы

    Похожие

    Блокировка всплывающих окон в Internet Explorer
    ... ие законные компании, размещающие рекламу в Интернете, отображают рекламные сообщения во всплывающих окнах в центре экрана. Такие окна также можно открыть, щелкнув ссылку или кнопку на веб-сайте, и они могут появиться над или под окном, в котором находится просматриваемая страница. Некоторые из всплывающих окон полезны. Например, когда вы щелкаете изображение, чтобы отобразить его увеличение, может открыться всплывающее окно. К сожалению, некоторые всплывающие окна могут содержать недопустимый
    Бесплатный инструмент для восстановления пароля Internet Explorer
    Если вы ищете наиболее полный способ восстановления всех типов паролей, сохраненных в Internet Explorer, вы попали по адресу. SysInfo Internet Explorer - это правильный выбор для вас! Программное обеспечение разработано для восстановления утерянных или забытых паролей IE, включая кэшированные учетные данные, пароли FTP, поля автозаполнения Internet Explorer и автозаполнения, пароли автозаполнения, пароли синхронизации, удостоверения, пароль Content Advisor и многие другие. Поскольку инструмент
    Полные имена элементов на рабочем столе системы
    Вы, наверное, заметили, что при настройках Windows XP по умолчанию длинные имена файлов, хранящиеся на рабочем столе, автоматически сокращаются. Если у многих из них есть имена, начинающиеся с одинаковой строки, вам нужно щелкнуть каждое из них, чтобы увидеть, относится ли операция к соответствующему файлу. Оказывается, вы можете легко отключить опцию сокращения имен файлов с уровня реестра. Для этого: В меню «Пуск» выберите «Выполнить» и используйте команду regedit
    Укладка ногтей с помощью эластики Fimo
    «Весна, весна, весна - это ты!» - скоро будем петь :) Самое ожидаемое время года быстро приближается, поэтому у нас в голове яркие, цветочные и фруктовые стилизации. Сегодня мы предложим вам маникюр с использованием эластики Fimo, который вызывает очень позитивные ассоциации с праздниками и детством. Вначале давайте объясним, что такое таинственный Фимо. Это пластичная масса, похожая на лепку из глины, которую можно легко формовать и создавать причудливые узоры, ее большим преимуществом
    Как установить Skype 8.13 на Debian, Ubuntu и Linux Mint
    Skype является наиболее популярным программным приложением, разработанным Microsoft , которое в основном используется для обмена мгновенными сообщениями, а также для аудио- и видеозвонков и видеоконференций. Среди этих функций Skype также может использоваться для совместного использования экрана, обмена файлами и обмена текстовыми и голосовыми сообщениями. В этой статье мы рассмотрим процесс установки самой последней версии Skype ( 8.13
    Как скачать видео с YouTube
    ... исом, что часто даже люди, которые не пользуются Интернетом ежедневно, знают о его существовании - самое популярное видео даже появилось на страницах телевизионных новостных сайтов. Сегодня вы узнаете, как загрузить фильм, размещенный на портале другим пользователем, на жесткий диск. Хотя YouTube не использовал потоковое видео в качестве первого, можно с уверенностью сказать, что он произвел революцию в Интернете. Впервые пользователям была предоставлена ​​возможность делиться своим видеоконтентом
    Адаптер HDMI для Apple iPad
    С момента выхода iPad 2 Apple предлагает интересный аксессуар: адаптер HDMI для устройств iOS. Проданный за 40 евро цифровой AV-адаптер позволяет подключать некоторые устройства iOS к телевизору с помощью кабеля HDMI. Это очень удобно во время путешествий, чтобы быстро показать кому-то видео или фото. En français ,
    Ошибка 404 и компания - что означают коды, которые вы видите в браузере?
    ... проблема не на вашей стороне, попробуйте один из следующих способов. Используйте поисковик на главной странице. Возможно, страница поиска была перемещена на другой адрес. Если на сайте нет поисковой системы, воспользуйтесь Google. Просто введите в строке поиска: содержание сайта: domain-strony.pl запрос [Рис. поиск правил домена в kei.pl] Возможно, Google хранит копию страницы, которую вы ищете. Чтобы проверить это, в результатах поиска щелкните
    Как удалить DRM из Kindle Books
    Разжечь книги которые вы покупаете у Amazon, защищены DRM, то есть вы можете читать их только в Kindle Reader или в официальном приложении Kindle. Невозможно прочитать купленные вами книги Kindle в других программах для чтения электронных книг, таких как Nook. Amazon применяет меры защиты от копирования на основе DRM для защиты электронных книг Kindle от интернет-пиратства, но, как потребитель, схема DRM ограничивает ваши возможности.
    Как максимально использовать бесплатные бизнес-сервисы Amazon
    Лучший способ думать о свободном уровне Amazon Web Services как трамплин. Это способ промочить ноги с помощью базовых механизмов AWS и Elastic Compute Cloud (EC2); понять, как Amazon обрабатывает экземпляры виртуальных машин, хранилища, данные и сети; и создать что-то, что в конечном итоге может быть размещено на полном платном экземпляре AWS. Это также способ узнать, как управлять
    Проблемы с LG G5 и как их исправить
    ... ительным отклонением от нормы для LG, флагман был первым устройством от компании, которое имеет цельнометаллическую конструкцию. Во-вторых, уникальная задняя раскладка кнопок больше не существует, и хотя домашняя кнопка со встроенным в нее сканером отпечатков пальцев все еще находится сзади, качелька громкости была перемещена в более традиционное положение сбоку. Наконец, и, что самое интересное, LG G5 также был первым в своем роде, предложившим некоторые модульные возможности. Это было достигнуто

    Комментарии

    Lt;пакет> Поместить несколько предложений в один файл <job id = "job1"> Распознать количество задач в файле <?
    lt;пакет> Поместить несколько предложений в один файл <job id = "job1"> Распознать количество задач в файле <? Job debug = "true"? > Разрешение на использование отладчика сценариев <script language = "VBScript" src = "MyScript.vbs" /> Объединяет другие файлы с текущим <script language = "VBScript"> Открывает и закрывает сценарий <! [CDATA []]> Парсер обрабатывает код как символ и не интерпретирует его <объект> Определяет объекты, содержащиеся в сценарии <ссылка>
    Поэтому я опущу даже написание их плюсов и минусов, потому что как насчет того, что они дешевы, так как они не производят почти столько света, сколько нам нужно при выращивании гидропоники?
    Поэтому я опущу даже написание их плюсов и минусов, потому что как насчет того, что они дешевы, так как они не производят почти столько света, сколько нам нужно при выращивании гидропоники? Профессиональное освещение Профессиональное освещение для гидропоники - это то, что было разработано и изготовлено для выращивания растений. Для каждого из следующих типов освещения мы можем быть уверены, что растения будут блестяще расти под ним. Достаточно выбрать мощность по размеру
    Что если присвоение имени пользователя и пароля не соответствует вашей политике безопасности?
    Что если присвоение имени пользователя и пароля не соответствует вашей политике безопасности? В этом случае, как вы будете входить в директор? Благодаря встроенной аутентификации Windows вам больше не нужно беспокоиться. Director 7.7 со встроенной аутентификацией Windows позаботится обо всех ваших потребностях в идентификации пользователя. С вашими учетными данными Windows он может аутентифицировать пользователя и напрямую перенаправить его на страницу панели
    Так что, если мы будем быстро и приятно путешествовать по сети, если однажды в самый неожиданный момент нам придется считаться с потерей связи?
    Так что, если мы будем быстро и приятно путешествовать по сети, если однажды в самый неожиданный момент нам придется считаться с потерей связи? Внезапное прерывание связи иногда очень расстраивает, что, вероятно, каждый из вас видел не раз. Сам интернет стал неотъемлемой частью нашей жизни. У нас с ним контакты как в профессиональной, так и в личной жизни. Независимо от того, играем ли мы в настоящее время в важную игру в онлайн-игре, мы хотим отправить деловое электронное письмо или уведомить
    Но как это улучшает безопасность и конфиденциальность Internet Explorer?
    Но как это улучшает безопасность и конфиденциальность Internet Explorer? Недели между обновлениями версий: 26 Microsoft Edge, по-видимому, обновляется только два раза в год, что не так часто, как у его более популярных конкурентов. Хотя лучше, чем Internet Explorer, в эпоху продвинутых вредоносные программы и интернет-атаки, частота обновления может иметь большое значение. 2,5 звезды
    Что произойдет, если файлы и настройки, которые я скопировал, не будут восстановлены?
    Что произойдет, если файлы и настройки, которые я скопировал, не будут восстановлены? Полезные ссылки Шаг 1. Создайте USB-накопитель Dell Recovery & Restore на рабочем компьютере препараты Dell Recovery and Restore USB Tool доступна только для операционных систем Windows. При переустановке операционной системы Linux используйте
    Запомнить как я жаловался в обзоре, что LG G2 такое время простоя в миллисекундах, когда вы делаете то же самое?
    Что если присвоение имени пользователя и пароля не соответствует вашей политике безопасности? В этом случае, как вы будете входить в директор? Благодаря встроенной аутентификации Windows вам больше не нужно беспокоиться. Director 7.7 со встроенной аутентификацией Windows позаботится обо всех ваших потребностях в идентификации пользователя. С вашими учетными данными Windows он может аутентифицировать пользователя и напрямую перенаправить его на страницу панели
    Является ли unikernel таким же, как контейнер?
    Является ли unikernel таким же, как контейнер? Нет. Unikernel находится на полпути между классической виртуализацией сервера и контейнером. В то время как традиционная виртуализация охватывает всю серверную ОС на виртуальной машине, уникальное ядро ​​внедряется только в системные библиотеки виртуальных машин, которые необходимы для запуска приложения, которое оно содержит. Ядро ОС остается за пределами машины. В отличие от контейнера Docker, уникальное ядро, таким образом, берет на
    Но что, если вы хотите нанять эксперта, который может сделать все, что угодно, от исследования ключевых слов до целенаправленной работы и создания ссылок?
    Но что, если вы хотите нанять эксперта, который может сделать все, что угодно, от исследования ключевых слов до целенаправленной работы и создания ссылок? Что касается независимых консультантов по SEO, вы можете рассчитывать на оплату консультаций от 3 до 175 долларов в час. SEO-агентства и услуги на основе проектов значительно различаются, и с некоторых из них взимается плата до 30 000 долларов США.
    Что если бы вы могли сказать, что вы можете обменять свою валюту дешевле, чем в обменном пункте?
    Что если бы вы могли сказать, что вы можете обменять свою валюту дешевле, чем в обменном пункте? Вы можете обменять евро без спреда, используя сервис обмена социальной валюты. Таким образом, вы можете сэкономить до 8%. Что такое обмен социальной валюты? В Интернете есть место, где встречаются более 260 000 человек. Они обменивают
    Что такое стиль Moto X?
    Что такое стиль Moto X? Находясь на вершине линейки Motorola 2015 года, Moto X Style (или Moto X Pure Edition, если вы находитесь в США) умудряется сочетать высококлассные характеристики с гладкой конструкцией и при этом по цене, которая выиграла ». твой кошелек плачет. Это не самый модный или загруженный Android-телефон, который вы можете купить прямо сейчас, но, безусловно, один из лучших. Motorola снова сделала фантастическое устройство - вслед за столь же впечатляющим

    Eot?
    Eot?
    Зачем?
    Зачем?
    Eot?
    Eot?
    Как это работает?
    Зачем?
    Eot?
    Eot?
    ДОБАВЬ В ЗАКЛАДКУ
    Форма входа
    ДРУЗЬЯ сайта

    Ярмарка Мастеров - ручная работа, handmade
    Способы заработка


    Copyright MyCorp © 2013
    Создать сайт бесплатно