не могу заставить @ font-face работать

Question

не могу заставить @ font-face работать

0

Я пытаюсь разместить собственный шрифт на своем веб-сайте. На моей странице CSS у меня есть:

body
{
    font-family: HurmeGeometricSans4_SemiBold;
}

@font-face
{
    font-family: HurmeGeometricSans4_SemiBold;
    src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf);
}

Файл изначально называется "Hurme Design - HurmeGeometricSans4 SemiBold", и я купил его с помощью веб-лицензии на myfonts.com. Каталог ресурсов находится в том же каталоге, в котором находится моя таблица стилей. Может ли кто-нибудь увидеть, что я здесь делаю, что может быть неправильно? Пробовал много, но не могу заставить его работать. Это должно использоваться в основном для мобильных сафари.

Ser Pounce 20 март 2014, в 10:11

Источник

1

если это тот же каталог, разве вы не должны исключать «ресурсы /» из URL? Чтобы убедиться, используйте полный http:// url, чтобы увидеть, работает ли он. CSS выглядит хорошо для меня.
Marcel 20 март 2014, в 08:18
1

Вы уже сталкивались с этим ?
Chase Ries 20 март 2014, в 08:23
0

@Marcel Марсель - что сработало, хотите поставить как ответ?
Ser Pounce 20 март 2014, в 09:01
0

@ChaseRies - спасибо за эту ссылку, сэр.
Ser Pounce 20 март 2014, в 09:01
0

@CoDEFRo Нет проблем!
Chase Ries 20 март 2014, в 09:02
0

@CoDEFRo Готово, и удачи в вашем проекте.
Marcel 20 март 2014, в 11:30

Показать ещё 4 комментария

Теги:

html

css

3 ответа

0

попробуй это

CSS

@font-face
{
    font-family: myCustomFont;
    src: url(sansation_light.woff);
}

div
{
  font-family:myCustomFont;
}

HTML

<div>test custom font</div>

UPDATE: (со страницей html и шрифтом в том же каталоге)

<html>

<head>

<style>

@font-face
{
    font-family: myCustomFont;
     src: url(elephant.ttf);
}

div
{
 font-family:myCustomFont;
}

</style>


</head>




<body>

<div>custom font</div>
default font

</body>



</html>

WhiteLine 20 март 2014, в 06:34

0

Спасибо, я попробовал это, "протестировал пользовательский шрифт", но он был похож на шрифт по умолчанию
Ser Pounce 20 март 2014, в 08:30
0

обновленный ответ
WhiteLine 20 март 2014, в 08:37
0

Я понял, спасибо, что вы нашли время, чтобы написать это, хотя.
Ser Pounce 20 март 2014, в 09:02

Показать ещё 1 комментарий

0

Попробуйте добавить формат подсказки формата ("opentype") следующим образом:

    body
    {
        font-family: HurmeGeometricSans4_SemiBold;
    }

    @font-face
    {
        font-family: HurmeGeometricSans4_SemiBold;
        src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf) format("opentype");
    }

Кроме того, у @font-face есть некоторые проблемы с браузером - вы можете проверить диаграмму совместимости браузера, например здесь: http://everythingfonts.com/font-face#idTab3

Вы также можете использовать онлайн-конвертер шрифтов и преобразовать шрифт в несколько форматов и использовать сгенерированный css.

blue 20 март 2014, в 05:49

0

Спасибо за ответ, в итоге мне пришлось просто указать полный URL-адрес для пути.
Ser Pounce 20 март 2014, в 09:02

Ещё вопросы

если это тот же каталог, разве вы не должны исключать «ресурсы /» из URL? Чтобы убедиться, используйте полный http:// url, чтобы увидеть, работает ли он. CSS выглядит хорошо для меня.
@Marcel Марсель - что сработало, хотите поставить как ответ?
@ChaseRies - спасибо за эту ссылку, сэр.
@CoDEFRo Готово, и удачи в вашем проекте.
Спасибо, я попробовал это, "протестировал пользовательский шрифт", но он был похож на шрифт по умолчанию
Я понял, спасибо, что вы нашли время, чтобы написать это, хотя.
Спасибо за ответ, в итоге мне пришлось просто указать полный URL-адрес для пути.

Marcel · Accepted Answer · 2014-03-20T10-04-00.000Z

Если CSS находится в том же каталоге, что и шрифт, забывающий о добавлении подкаталога, в вашем случае resources/. Он будет считаться resources/resources/font вместо требуемых resources/font.

Если у вас есть сомнения, используйте полный URL (например, http://www.yourdomain.com/path-to-font/font)

Благодарю. Я использовал полный URL, и это сработало.