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 that you have read and understand our privacy policy and code of conduct.

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