Несколько деклараций шрифтов с одинаковым именем шрифта, но с разными значениями шрифта с разными значениями шрифта

Question

После того, как this article, я объявил свои разные грани шрифтов под тем же именем, но с разными значениями font-weight (100, 400, 600 и 700). Для этого я взял код, созданный Font Squirrel Font Generator, и просто установил одинаковое значение для всех экземпляров font-family.

По какой-то причине 100 и 400 показывают одно и то же (по-видимому, регулярное), а 600 и 700 - тоже (вероятно, жирным шрифтом). Любая идея, почему?

@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-bold.eot'); 
    src: url('proximanova-bold.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-bold.woff2') format('woff2'), 
     url('proximanova-bold.woff') format('woff'), 
     url('proximanova-bold.ttf') format('truetype'), 
     url('proximanova-bold.svg#proxima_nova_rgbold') format('svg'); 
    font-weight: 700 !important; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-light.eot'); 
    src: url('proximanova-light.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-light.woff2') format('woff2'), 
     url('proximanova-light.woff') format('woff'), 
     url('proximanova-light.ttf') format('truetype'), 
     url('proximanova-light.svg#proxima_novalight') format('svg'); 
    font-weight: 100 !important; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-semibolditalic.eot'); 
    src: url('proximanova-semibolditalic.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-semibolditalic.woff2') format('woff2'), 
     url('proximanova-semibolditalic.woff') format('woff'), 
     url('proximanova-semibolditalic.ttf') format('truetype'), 
     url('proximanova-semibolditalic.svg#proxima_novasemibold_italic') format('svg'); 
    font-weight: 600; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-regularitalic.eot'); 
    src: url('proximanova-regularitalic.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-regularitalic.woff2') format('woff2'), 
     url('proximanova-regularitalic.woff') format('woff'), 
     url('proximanova-regularitalic.ttf') format('truetype'), 
     url('proximanova-regularitalic.svg#proxima_novaregular_italic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-semibold.eot'); 
    src: url('proximanova-semibold.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-semibold.woff2') format('woff2'), 
     url('proximanova-semibold.woff') format('woff'), 
     url('proximanova-semibold.ttf') format('truetype'), 
     url('proximanova-semibold.svg#proxima_novasemibold') format('svg'); 
    font-weight: 600; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-regular.eot'); 
    src: url('proximanova-regular.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-regular.woff2') format('woff2'), 
     url('proximanova-regular.woff') format('woff'), 
     url('proximanova-regular.ttf') format('truetype'), 
     url('proximanova-regular.svg#proxima_nova_rgregular') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'proximanova'; 
    src: url('proximanova-lightitalic.eot'); 
    src: url('proximanova-lightitalic.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-lightitalic.woff2') format('woff2'), 
     url('proximanova-lightitalic.woff') format('woff'), 
     url('proximanova-lightitalic.ttf') format('truetype'), 
     url('proximanova-lightitalic.svg#proxima_novalight_italic') format('svg'); 
    font-weight: 100; 
    font-style: italic; 
} 

Answer 1

Я предлагаю использовать Firebug с браузером Firefox в качестве инструмента для решения этой проблемы CSS размера шрифта. Firebug покажет, каким атрибутам CSS был присвоен приоритет, чтобы назначить конкретную характеристику стиля элемента веб-страницы. Обратная связь Firebug часто показывает решение проблем, связанных с CSS.

(Firebug пример с изображениями удалены из-за недостаточной репутации точек.)

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

BTW, Chrome имеет аналогичный инструмент, который должен обеспечивать аналогичную обратную связь.

Answer 2

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

Answer 3

Первое, что нужно попробовать, Кеппинг те же шрифта фамилии, чтобы установить весовые коэффициенты, используя описательные значения (normal - bold - bolder - lighter).

---

В противном случае рассмотрим по умолчанию @ шрифт-слойного функциональности (импортируя шрифт, присвоив ему имя шрифта семьи),

Поэтому первое, что было бы дифференцировать font-family: дескриптор (например, proximanova-bold, proximanova-semi и т. д.)

Расширение этой опции, если вы задаете стиль шрифта и вес по определенным шрифтам, которые уже стилизованы с теми про вы можете привести к двойному стилю.
Затем вы должны установить все шрифты взвешивают & стиля нормально и просто выбрать цель font-family:

@font-face { 
    font-family: 'proximanova-bold'; 
    src: url('proximanova-bold.eot'); 
    src: url('proximanova-bold.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-bold.woff2') format('woff2'), 
     url('proximanova-bold.woff') format('woff'), 
     url('proximanova-bold.ttf') format('truetype'), 
     url('proximanova-bold.svg#proxima_nova_rgbold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 4

Автор шрифта Proxima Nova не случайно отделил его на множество файлов. Каждый из них поддерживает только один набор свойств, таких как конденсируются, вес и т.д. font-weight не может изменить его, даже если заменить !important декларацию !very important :)

Внимательно прочитав эту статью о Proxima Nova вы можете обнаружили, что он поддерживает для семь весов: тонкий (100), светлый (300), регулярный (400), полужирный (600), полужирный (700), сверхтяжелый (800) и черный (900). Вы также можете проверить его here.

В вашем коде вы пытаетесь, например, установить вес 100 на светлый шрифт, но его вес фиксирован 300 (кажется почти как обычный, но на самом деле другой). Возьмите вместо этого «тонкий» шрифт, и вы получите 100.