1

Хочу чтобы везде был по умолчанию'SegoeUI' в normal. И чтобы работал font-weight когда выставляется какому-либо классу. Сейчас не работает. p.class1 все равно как normal, хотя стоит lighter.

<h1>Bold</h1>
<p class="class1">Lighter</p>
<p>Normal</p>

@font-face{
    font-family: 'SegoeUI';
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot');
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('svg');
    font-weight: lighter;
    font-style: normal;
}
@font-face{
    font-family: 'SegoeUI';
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot');
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot?#iefix') format('embedded-opentype'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.woff') format('woff'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.ttf') format('truetype'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.svg#web') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face{
    font-family: 'SegoeUI';
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot');
    src:url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot?#iefix') format('embedded-opentype'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.woff') format('woff'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.ttf') format('truetype'),
           url('http://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.svg#web') format('svg');
    font-weight: normal;
    font-style: normal;
}
body { font-family: "SegoeUI"; }
h1 { font-weight: bold; }
p.class1 { font-weight: lighter; }

1 ответ 1

1

Посмотрите эту страницу на сайте fonts4web

Способ подключения шрифта отличается от вашего. Для переключения начертания используется смена font-family. Так же шрифты с различным начертанием подключены с различными именами font-family

/* font-family: "SegoeUIRegular"; */
@font-face {
    font-family: "SegoeUIRegular";
    src: url("../fonts/SegoeUIRegular/SegoeUIRegular.eot");
    src: url("../fonts/SegoeUIRegular/SegoeUIRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/SegoeUIRegular/SegoeUIRegular.woff") format("woff"),
    url("../fonts/SegoeUIRegular/SegoeUIRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "SegoeUIBold"; */
@font-face {
    font-family: "SegoeUIBold";
    src: url("../fonts/SegoeUIBold/SegoeUIBold.eot");
    src: url("../fonts/SegoeUIBold/SegoeUIBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/SegoeUIBold/SegoeUIBold.woff") format("woff"),
    url("../fonts/SegoeUIBold/SegoeUIBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "SegoeUIItalic"; */
@font-face {
    font-family: "SegoeUIItalic";
    src: url("../fonts/SegoeUIItalic/SegoeUIItalic.eot");
    src: url("../fonts/SegoeUIItalic/SegoeUIItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/SegoeUIItalic/SegoeUIItalic.woff") format("woff"),
    url("../fonts/SegoeUIItalic/SegoeUIItalic.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "SegoeUILight"; */
@font-face {
    font-family: "SegoeUILight";
    src: url("../fonts/SegoeUILight/SegoeUILight.eot");
    src: url("../fonts/SegoeUILight/SegoeUILight.eot?#iefix")format("embedded-opentype"),
    url("../fonts/SegoeUILight/SegoeUILight.woff") format("woff"),
    url("../fonts/SegoeUILight/SegoeUILight.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* font-family: "SegoeUISemiBold"; */
@font-face {
    font-family: "SegoeUISemiBold";
    src: url("../fonts/SegoeUISemiBold/SegoeUISemiBold.eot");
    src: url("../fonts/SegoeUISemiBold/SegoeUISemiBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/SegoeUISemiBold/SegoeUISemiBold.woff") format("woff"),
    url("../fonts/SegoeUISemiBold/SegoeUISemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

Посмотрите пример кода.

@font-face {
  font-family: 'SegoeUILight';
  src: url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot');
  src: url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.eot?#iefix') format('embedded-opentype'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.woff') format('woff'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.ttf') format('truetype'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Light/latest.svg#web') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SegoeUIBold';
  src: url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot');
  src: url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.eot?#iefix') format('embedded-opentype'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.woff') format('woff'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.ttf') format('truetype'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Bold/latest.svg#web') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SegoeUIRegular';
  src: url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot');
  src: url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.eot?#iefix') format('embedded-opentype'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.woff') format('woff'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.ttf') format('truetype'), url('https://i.s-microsoft.com/fonts/Segoe-UI/Cyrillic/Normal/latest.svg#web') format('svg');
  font-weight: normal;
  font-style: normal;
}
.bold {
  font-family: 'SegoeUIBold';
}
.light {
  font-family: 'SegoeUILight';
}
.normal {
  font-family: "SegoeUIRegular";
}
<h3 class="bold">
  Съешь этих мягких французских булочек (ожидаю bold)
</h3>

<h3 class="normal">
  Съешь этих мягких французских булочек (ожидаю notmal)
</h3>

<h3 class="light">
  Съешь этих мягких французских булочек (ожидаю light)
</h3>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.