2 файла шрифтов в css, один работает, но другой не

Question

У меня есть 2 файла шрифта: Gotham-Book.ttf и HelveticaNeue-Thin.otf. Helvetica отлично работает, но Gotham этого не делает.

@font-face { 
    font-family: 'HelveticaNeue-Thin'; 
    src:asset-url('HelveticaNeue-Thin.otf'); 
    src:font-url('HelveticaNeue-Thin.otf'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Gotham-Book'; 
    src:asset-url('Gotham-Book.ttf'); 
    src:font-url('Gotham-Book.ttf'); 
    font-weight: normal; 
    font-style: normal; 
} 

body 
{ 
    font-family: 'Gotham-Book', 'HelveticaNeue-Thin'; 
    font-size: 200%; 
} 

Оба файла находятся в одной папке.

Answer 1

Это должно сработать! Именно так я всегда указывал свои шрифты в CSS3.

@font-face { 
    font-family: "FontName"; 
    src: url(FontName.extension); 
} 

Это, если они находятся в вашей корневой папке. Если это должно было существовать в другой папке было бы:

@font-face { 
    font-family: "FontName"; 
    src: url(/folder/FontName.extension); 
} 

Answer 2

Если это для сети, некоторые рекомендации:

@font-face { 
    font-family: 'Helvetica Neue'; 
    src: url('HelveticaNeue-Thin.otf') format('opentype'); 
} 

Две вещи, чтобы отметить: src принимает URLs, и они используют url(...), а не font-url или asset-url, и в идеале - индикатор формата, чтобы было ясно, что вы знаете, что вы пытаетесь загрузить. Кроме того, не нужно упоминать вес и стиль, если они нормальные, поскольку они являются значениями по умолчанию.

@font-face { 
    font-family: 'Gotham Book'; 
    src: url('Gotham-Book.ttf') format('truetype'); 
} 

Опять же, подсказка формата хорошая. И, наконец:

body 
{ 
    font-family: 'Gotham Book', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 200%; 
} 

Есть стек шрифт, так что ваш контент имеет разумные резервные объявления, в случае дела идут плохо. Без такого стека вы, вероятно, закончите Times/Times New Roman при сбое ресурса шрифта, который даже не является шрифтом sans-serif. Это будет выглядеть намного хуже, чем с «неправильной», но все же безрефлекторной последовательностью резервных копий.

На дизайнерской ноте, хотя, вы делаете что-то странное: Gotham Книга гораздо толще, чем Helvetica Neue редеющий, так притворяется, что «тонкий» шрифт на самом деле шрифт «нормальный» и взаимозаменяемый для Книга Готэм любопытна. Это делает гораздо больше смысла, чтобы сказать:

@font-face { 
    font-family: 'Helvetica Neue'; 
    src: url('HelveticaNeue-Regular.otf') format('opentype'); 
    font-weight: 400; 
} 

@font-face { 
    font-family: 'Helvetica Neue'; 
    src: url('HelveticaNeue-Thin.otf') format('opentype'); 
    font-weight: 300; 
} 

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

h1 { 
    font-family: 'Gotham Book'; 
} 
p { 
    font-family: 'Helvetica Neue'; 
    font-weight: 400; /* will use ...-Regular source */ 
} 
p.thin { 
    font-weight: 300; /* will use ...-Thin source */ 
} 

Наконец, если вы хотите, чтобы поддерживать большинство браузеров, дон» t используйте источники ttf/otf, но преобразуйте их в WOFF. Это скорее «обертка», чем конверсия, но она значительно увеличивает поддержку платформы.

Answer 3

Если вы используете font-url() или asset-url(), убедитесь, что файл css имеет расширение .css.scss, если вы используете Rails, поскольку они нуждаются в обработке до их подачи.