@fontface Quicksand Light для Mac / iPhone / iPad - PullRequest
Новая
       15

@fontface Quicksand Light для Mac / iPhone / iPad

0 голосов
/ 14 февраля 2012

Я установил веб-набор Quicksand Light и зарезервировал для себя мой CSS-файл, он отлично работает во всех браузерах на ПК, однако, когда я просматриваю его на MAC в любом браузере, веб-шрифт Quicksand Light не отображается должным образом, какраз новый римский тип шрифта.Разве это не подбирает шрифт?или это просто не рендеринг?

не может найти решения этой проблемы, весь день пытался ее исправить

CSS: 

@font-face {
font-family: 'QuicksandLight';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
     url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
     url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
     url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
     /*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: normal;
font-style: normal;

}

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

}

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

}

CSS для QuicksandBook; 

body
{
 font:13px/24px 'QuicksandBook', Arial,sans-serif;
 font-weight: normal;
 }

на них есть ссылки в разделе заголовка.

Ответы [ 2 ]

1 голос
/ 14 февраля 2012

К сожалению, у меня нет Mac, доступного для тестирования, но некоторые из перечисленных здесь указателей вполне могут стоить того. Дайте нам знать, как вы поживаете!

http://paulirish.com/2010/font-face-gotchas/#smiley

0 голосов
/ 14 февраля 2012

Я обычно загружаю все свои шрифты в самый верх моего CSS - я не знаю, если это имеет значение.

Также для дальнейшего использования вы можете сделать свой шрифт следующим образом: 

@font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light-webfont.eot');
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
     url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'),
     url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'),
     url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
     /*url('/assets/fonts/Quicksand_Light.otf');*/
font-weight: lighter;
font-style: normal;

}

@font-face {
font-family: 'Quicksand';
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot');
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'),
     url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'),
     url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'),
     url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg');
font-weight: lighter;
font-style: italic;

}

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

}

Это означает, что вы можете ссылаться на вес шрифта в вашем CSS, а не устанавливать шрифт как наклонный.например, 

body
{
 font: italic lighter 13px/24px 'Quicksand', Arial,sans-serif;
 }

, который напечатает шрифт курсивом в более светлом стиле

...