Шрифт "Segoe UI" с шрифтом и локальным шрифтом

Я хочу использовать шрифт "Segoe UI" на веб-сайте, если он установлен на компьютере пользователя.

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

Проблема в том, что я не могу работать с Segoe UI Bold (я думаю, что это неверно). Любая идея?

Вот пример. (4) и (5) будут одинаковыми: http://jsfiddle.net/kxHQR/1/

@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 700;
  src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 400;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 300;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}

/* ... */

BODY {
 font-family: 'Myname';    
}

.boldtext {
    font-family:'Segoe UI';
    font-weight:700;
}

<p style='font-weight:300'>1. Text with font-weight:300. OK</h1>
<p>2. Here is normal text. OK</p>
<p style='font-weight:600'>3. Text with font-weight:600.  OK</p> 
<p style='font-weight:700' >4. Text with font-weight:700. It must be like (5), but it is like (3). :(</p>
<p class='boldtext'>5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; </p>

Ответы

Ответ 1

Это из собственного из таблицы Microsoft для приложений Windows 8 (Metro):

/*
Explicitly define a Segoe UI font-family so that we can assign Segoe UI 
Semilight to an appropriate font-weight.
*/
@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

Этот подход работает для меня, а также подход, используемый Open Sans и шрифтами Google. Тем не менее, это полная противоположность этого подхода, первоначально от Paul Irish:

@font-face {
    font-family: 'ChunkFiveRegular;
    src: url('whatever source');
    font-weight: normal;
    font-style: normal;
}

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

Мне нравится подход Microsoft лучше, потому что он позволяет указать font-style и font-weight, который вам нужен, и браузер отобразит правильный файл шрифта вместо того, чтобы вычислять размеры faux, жирным шрифтом и курсивом. Тем не менее, это требует, чтобы вы предоставили файл шрифта для каждого варианта шрифта в семействе, которое вы будете использовать.

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

Ответ 2

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

для освещения используйте font-family: Segoe UI Light
для регулярных, используйте только font-family: Segoe UI
для полужирного шрифта используйте font-family: Segoe UI Semibold
для жирного шрифта, используйте font-family: Segoe UI; font-weight: bold

Это грязно и нелогично, но работает на Firefox, Chrome, IE, Opera, Safari (проверено на Win 7).

На веб-страницах, вероятно, лучше попробовать найти подходящий бесплатный шрифт с разными весами и использовать его через @font-face. В конце концов, пользовательский интерфейс Segoe далеко не универсален, и нет простого способа настроить подходящие резервные копии для него.

Ответ 3

@font-face {
    font-family: 'Segoe UI';
    src: url('./ui/segoeui.eot');
    src: local("Segoe UI"),
         local("Segoe"),
         local("Segoe WP"),
         url('./ui/segoeui.eot?#iefix') format('embedded-opentype'),
         url('./ui/segoeui.woff') format('woff'),
         url('./ui/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/semibold/seguisb.eot');
    src: local("Segoe Semibold"),
         local("Segoe WP Semibold"), 
         url('/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/semibold/seguisb.woff') format('woff'),
         url('/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/bold/segoeuib.eot');
    src: local("Segoe Bold"),
         local("Segoe WP Bold"),
         url('/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/bold/segoeuib.woff') format('woff'),
         url('/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/light/segoeuil.eot');
    src: local("Segoe UI Light"),
         local("Segoe WP Light"),
         url('/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/light/segoeuil.woff') format('woff'),
         url('/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Скачать:

https://github.com/KingRider/frontcom/tree/master/css/fonts

Ответ 4

Чтобы использовать Segoe UI Light на вашей странице, используйте

CSS { font-family: "Segoe UI"; font-weight: lighter; }