Как я могу использовать один шрифт для нормального веса, а другой - для жирного шрифта на теле?

Я пытаюсь применить шрифт 'open sans' к моему сайту. Я хотел бы использовать «open sans regular» для текста, который не является жирным шрифтом, и шрифт «open sans bold» для текста, выделенного полужирным шрифтом, «open sans italic» для курсивного текста и, наконец, «open sans bold italic» для текст выделен полужирным шрифтом и курсивом. Я не хочу устанавливать класс, а просто применять их ко всему веб-сайту.Как я могу использовать один шрифт для нормального веса, а другой - для жирного шрифта на теле?

Вот код, который я пытался, но только применяя «Open Sans наклонным» и я думаю, что «Open Sans полужирный курсивный» ко всему, даже если это не должно быть наклонным ..

@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-semibold-webfont.eot'); 
    src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-semibold-webfont.woff') format('woff'), 
     url('opensans-semibold-webfont.ttf') format('truetype'), 
     url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg'); 
    font-weight: bold; 
} 
@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-italic-webfont.eot'); 
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-italic-webfont.woff') format('woff'), 
     url('opensans-italic-webfont.ttf') format('truetype'), 
     url('opensans-italic-webfont.svg#open_sansitalic') format('svg'); 
    font-style: italic, oblique; 
} 
@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-semibolditalic-webfont.eot'); 
    src: url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-semibolditalic-webfont.woff') format('woff'), 
     url('opensans-semibolditalic-webfont.ttf') format('truetype'), 
     url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg'); 
    font-weight: bold; 
    font-style: italic, oblique; 
} 
body { 
font-family:'opensans'; 
font-size:78%; 
}

Вот пример проблемы, обратите внимание, что все шрифты выделены курсивом, если это не должно быть: http://www.bbmthemes.com/themes/modular/

источник

2013-08-25 BRAINBUZZ media

Все шрифты не выделены курсивом по указанным. Описание проблемы является неполным и другими способами (HTML и т. Д.), И собственный ответ плаката, похоже, говорит о том, что проблема решена, хотя логика в ответе ошибочна (порядок не имеет значения по спецификациям). –

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

Различные шрифта записи (изменить значение MyFontName на имя нового типа шрифта вы хотите):

@font-face { 
    font-family: 'MyFontName'; 
    src: url('opensans-italic-webfont.eot'); 
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-italic-webfont.woff') format('woff'), 
     url('opensans-italic-webfont.ttf') format('truetype'), 
     url('opensans-italic-webfont.svg#open_sansitalic') format('svg'); 
    font-style: italic, oblique; 
}

Лучший способ (применить шрифт-стиль шрифта на CSS вы хотите):

@font-face { 
     font-family: 'opensans'; 
     src: url('opensans-italic-webfont.eot'); 
     src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), 
      url('opensans-italic-webfont.woff') format('woff'), 
      url('opensans-italic-webfont.ttf') format('truetype'), 
      url('opensans-italic-webfont.svg#open_sansitalic') format('svg'); 
     font-style: italic, oblique; /* FONT STYLE ARE HERE */ 
    } 

p{font-family:opensans, sans-serif; font-style:italic;}

источник

2013-08-25 03:44:23 gespinha

Я пытаюсь сделать все шрифты тела регулярными, а не курсивом. Мне нужен только текст, который имеет свойство css 'font-style: italic;' чтобы автоматически использовать открытый шрифт без курсива, я хочу, чтобы все, что не было курсивом, использовало открытый шрифт без стандартного шрифта. Теги p должны быть регулярными. –

Вы уже это сделали, проблема в том, что вы назначили одинаковое значение семейства шрифтов для всех ваших записей шрифтов. font-family: 'opensans'; - Назначьте только одно имя для каждой записи шрифта, чтобы затем вы могли сопоставить определенный шрифт с конкретным элементом. – gespinha

Я не хочу, чтобы стиль каждого элемента, дело в том, что он должен работать автоматически. –

-1

Необходимо изменить фамилию шрифта разными идентификаторами. Я вижу, что вы используете одно и то же имя для всех классов. Проверить ценам ниже

Нормальный

@font-face { 
    font-family: 'opensansNormal'; 
    // code goes on

Жирный

@font-face { 
    font-family: 'opensansBold'; 
    // code goes on

источник

2013-08-25 04:28:34 Nitesh

Хорошо, я понял, мой собственный вопрос. Должен быть очень конкретный порядок, чтобы он работал правильно. Вы должны определить их в таком порядке:

нормальный курсив жирный полужирный курсив

Так что CSS будет выглядеть следующим образом:

@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-italic-webfont.eot'); 
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-italic-webfont.woff') format('woff'), 
     url('opensans-italic-webfont.ttf') format('truetype'), 
     url('opensans-italic-webfont.svg#open_sansitalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-semibold-webfont.eot'); 
    src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-semibold-webfont.woff') format('woff'), 
     url('opensans-semibold-webfont.ttf') format('truetype'), 
     url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'opensans'; 
    src: url('opensans-semibolditalic-webfont.eot'); 
    src: url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-semibolditalic-webfont.woff') format('woff'), 
     url('opensans-semibolditalic-webfont.ttf') format('truetype'), 
     url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 
body { 
font-family:'opensans'; 
font-size:78%; 
}

Эта статья помогла мне понять это http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

источник

2013-08-25 05:41:06

Я подозреваю, что это связано не столько с заказом, сколько с включением как 'font-weight', так и' font-style' в каждое объявление '@ font-face'. – shennan

Как я могу использовать один шрифт для нормального веса, а другой - для жирного шрифта на теле?

ответ

Смежные вопросы