Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

[РЕШЕНО] Проблемы с @font-face, слетают все настройки стиля

Nat7
 Share

Recommended Posts

Nat7 Apprentice

Nat7

Опубліковано:
Опубліковано:

Пытаюсь сделать, чтобы нестандартные шрифты отображались на мобильных.

Сгенерировала их через http://www.fontsquirrel.com/, создала в каталоге template папку fonts, кинула туда шрифты

 

Вставляю в stylesheet.css

@font-face {

    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;

В итоге весь стиль сайта слетает  =(

Как только удаляю строчку @font-face {, все становится норм, но шрифты все равно не отображаются

post-687940-0-94896000-1413378144_thumb.png

Надіслати
Поділитися на інших сайтах

riny Veteran

riny

Опубліковано:
Опубліковано:

может так:

@font-face {
    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
Надіслати
Поділитися на інших сайтах
1

Nat7 Apprentice

Nat7

Опубліковано:
  • Автор
Опубліковано:

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

Шрифт используется в шапке для номера телефона

вот так в целом выглядит

#big_mobile {
font-size: 19px;
color: #ff524c;
@font-face {
    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
Надіслати
Поділитися на інших сайтах

ElHombre Rookie

ElHombre

Опубліковано:
Опубліковано:

попробуйте вот так:

@font-face {
    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


#big_mobile {
font-size: 19px;
color: #ff524c;
font-family: "lucida_sans_unicoderegular";
}
Надіслати
Поділитися на інших сайтах

Nat7 Apprentice

Nat7

Опубліковано:
  • Автор
Опубліковано:

 

попробуйте вот так:

@font-face {
    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


#big_mobile {
font-size: 19px;
color: #ff524c;
font-family: "lucida_sans_unicoderegular";
}

 

Нет, так тоже не работает.

В целом с сайтом все ок, но шрифты перестали вообще через любые браузеры отображаться.

Ничего не понимаю, в чем проблема?

Надіслати
Поділитися на інших сайтах

wipper Enthusiast

wipper

Опубліковано:
Опубліковано:

я убрала @font-face и вернула как было, пока не разобралась как сделать

 Плохо, что вы убрали!!! 

 

С кодом вроде бы все правильно, возможные варианты по моему мнению:

  1. Пропишите абсолютные пути к вашим шрифтам
  2. Попробуйте вставить не в css,  а непосредственно в Хедер <slyle> Ваш код </style> (посмотрите что получится)
  3. Возможно браузер просто игнорирует этот код

Я так понял Вам нужен нестандартный шрифт к мобильному телефону в шапке сайта, можно пойти по другому пути:

В хедер вставляем 

<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

В CSS вставляем:

#big_mobile {
font-family: 'Lobster', cursive;
font-size: 30px;
}

И по моему ни какой головной боли...

 

Потом можно гугл шрифт заменить на другой ваш

Вот что получилось

post-683955-0-43681100-1413464642_thumb.jpg

 

Вот код подключения этого шрифта из гугл CSS

/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), url(http://fonts.gstatic.com/s/lobster/v10/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Ссылка на гугл шрифты http://www.google.com/fonts/#

 

Вот шрифт http://fonts.gstatic.com/s/lobster/v10/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2

Надіслати
Поділитися на інших сайтах

Nat7 Apprentice

Nat7

Опубліковано:
  • Автор
Опубліковано:

 Я так понял Вам нужен нестандартный шрифт к мобильному телефону в шапке сайта, можно пойти по другому пути:

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

Спасибо за предложенное решение, буду пробовать!

Надіслати
Поділитися на інших сайтах

wipper Enthusiast

wipper

Опубліковано:
Опубліковано:

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

Спасибо за предложенное решение, буду пробовать!

ЧЁТО я ничего уже не понимаю, захожу на ваш сайт с мобильно всё работает, или вы хотите чтобы те шрифты отображались только при заходе с мобильного телефона, а если  заходить на сайт с компа, то шрифты обычные?

Надіслати
Поділитися на інших сайтах

Nat7 Apprentice

Nat7

Опубліковано:
  • Автор
Опубліковано:

ЧЁТО я ничего уже не понимаю, захожу на ваш сайт с мобильно всё работает, или вы хотите чтобы те шрифты отображались только при заходе с мобильного телефона, а если  заходить на сайт с компа, то шрифты обычные?

Чет я тоже уже не понимаю) я заходила с 2х разных мобильных, отображается обычный шрифт Arial везде, никакими Lucida, Dotum и др. не пахнет. Странно. У меня разница очевидна - телефон, меню, цена. И телефон в шапке к тому же вместо красного становится голубым - я так понимаю, это проделки айфона, он его преобразует в ссылку и видимо это не исправить никак. 

Я хочу, чтобы мой сайт одинаково выглядел на всех устройствах, вот и все)

Надіслати
Поділитися на інших сайтах

Nat7 Apprentice

Nat7

Опубліковано:
  • Автор
Опубліковано:

ЧЁТО я ничего уже не понимаю, захожу на ваш сайт с мобильно всё работает, или вы хотите чтобы те шрифты отображались только при заходе с мобильного телефона, а если  заходить на сайт с компа, то шрифты обычные?

 

post-687940-0-58909600-1413470158_thumb.png

Надіслати
Поділитися на інших сайтах

Nat7 Apprentice

Nat7

Опубліковано:
  • Автор
Опубліковано:

А где вы этот скрин взяли? у меня все нармально, шрифты такие как и на сайте

 

ВОт скрин с эмулятора оперы мини attachicon.gifImage 3.jpg

это скрин с моего айфона

ндааа, я так понимаю у вас даже на компе не отображаются шрифты((  поэтому вы и не видите разницы

у меня это выглядит вот так (сорри за качество, разница вроде видна)

post-687940-0-03771700-1413480085_thumb.jpg

Надіслати
Поділитися на інших сайтах

wipper Enthusiast

wipper

Опубліковано:
Опубліковано:

это скрин с моего айфона

ндааа, я так понимаю у вас даже на компе не отображаются шрифты((  поэтому вы и не видите разницы

у меня это выглядит вот так (сорри за качество, разница вроде видна)

У меня все на компе отображается, и на телефоне шрифт без засечек, не так как на вашем айфоне (скрин прилагаю). Везде практически одно и тоже, только на телефоне в мозиле есть небольшое отличие (посмотрите скрин)

post-683955-0-46871600-1413488841_thumb.jpg

 

Даже интересно, буду наблюдать за темой, если в голову что придет дельное отпишусь )))

Надіслати
Поділитися на інших сайтах

wipper Enthusiast

wipper

Опубліковано:
Опубліковано:

Ну вот смотрите у вас в CSS стилях прописано font: 14px Dotum;

#menu a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: inline-block;
padding: 12px 10px;
margin: 0 5px 0 3px;
font: 14px Dotum;
letter-spacing: 1px;
text-transform: uppercase;
}

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

#menu a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: inline-block;
padding: 12px 10px;
margin: 0 5px 0 3px;
/* font: 14px Dotum; */
font-family: 'Lobster', cursive;
letter-spacing: 1px;
text-transform: uppercase;
}
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду