Внедрение шрифтовых иконок в макет

[PavelTkachev]

Я создал шрифтовые иконки для сайта с помощью http://fontello.com/. У меня ряд вопросов:

 

1. Как вставить иконку не через свойство content внутри :before?

2. Вот в этой статье с данного сайта сказано, что iOs не поддерживает ttf-шрифты. А на сайте caniuse.com сказано, что поддерживает. Правда там начинается с версии 7.1. Какие именно версии iOs не поддерживают ttf-шрифты?

3. Какой mime-type нужно использовать для шрифтов при его внедрении в css?

[Sergik+]

Я создал шрифтовые иконки для сайта с помощью http://fontello.com/. У меня ряд вопросов:

 

1. Как вставить иконку не через свойство content внутри :before?

2. Вот в этой статье с данного сайта сказано, что iOs не поддерживает ttf-шрифты. А на сайте caniuse.com сказано, что поддерживает. Правда там начинается с версии 7.1. Какие именно версии iOs не поддерживают ttf-шрифты?

3. Какой mime-type нужно использовать для шрифтов при его внедрении в css?

woff используйте, не надо вставлять через before - отказался я от такого способа, есть сложности с ним,

используйте просто span с классом - гораздо проще.

[Galaxy]

Отправлено Сегодня, 09:16 PavelTkachev, on 02 Dec 2014 - 09:48 AM, said: Я создал шрифтовые иконки для сайта с помощью http://fontello.com/. У меня ряд вопросов:   1. Как вставить иконку не через свойство content внутри :before? 2. Вот в этой статье с данного сайта сказано, что iOs не поддерживает ttf-шрифты. А на сайте caniuse.com сказано, что поддерживает. Правда там начинается с версии 7.1. Какие именно версии iOs не поддерживают ttf-шрифты? 3. Какой mime-type нужно использовать для шрифтов при его внедрении в css? woff используйте, не надо вставлять через before - отказался я от такого способа, есть сложности с ним, используйте просто span с классом - гораздо проще.

В классе все равно надо будет задавать контент через before или after 

[Sergik+]

 

Отправлено Сегодня, 09:16 PavelTkachev, on 02 Dec 2014 - 09:48 AM, said: Я создал шрифтовые иконки для сайта с помощью http://fontello.com/. У меня ряд вопросов:   1. Как вставить иконку не через свойство content внутри :before? 2. Вот в этой статье с данного сайта сказано, что iOs не поддерживает ttf-шрифты. А на сайте caniuse.com сказано, что поддерживает. Правда там начинается с версии 7.1. Какие именно версии iOs не поддерживают ttf-шрифты? 3. Какой mime-type нужно использовать для шрифтов при его внедрении в css? woff используйте, не надо вставлять через before - отказался я от такого способа, есть сложности с ним, используйте просто span с классом - гораздо проще.

В классе все равно надо будет задавать контент через before или after 

 

What ?

[npofopr]

1. никак, или генерируйте svg

2. ну дак ниже 7.1 видимо.

3. а какая разница, куда его вы внедряете? шрифт и в африке шрифт. Посмотрите тут https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess

[Galaxy]

Как тут делайте ,и будет норм. http://fortawesome.github.io/Font-Awesome/

[npofopr]

 

 

Отправлено Сегодня, 09:16 PavelTkachev, on 02 Dec 2014 - 09:48 AM, said: Я создал шрифтовые иконки для сайта с помощью http://fontello.com/. У меня ряд вопросов:   1. Как вставить иконку не через свойство content внутри :before? 2. Вот в этой статье с данного сайта сказано, что iOs не поддерживает ttf-шрифты. А на сайте caniuse.com сказано, что поддерживает. Правда там начинается с версии 7.1. Какие именно версии iOs не поддерживают ttf-шрифты? 3. Какой mime-type нужно использовать для шрифтов при его внедрении в css? woff используйте, не надо вставлять через before - отказался я от такого способа, есть сложности с ним, используйте просто span с классом - гораздо проще.

В классе все равно надо будет задавать контент через before или after 

 

What ?

 

Мне тоже интересно, как вы вставляете шрифт просто спаном с классом. что у вас в стилях прописано. И еще, причем тут woff?

[Sergik+]

Я использую <i class="ico"></i>, так же как и bootstrap и куча других скиловых верстальщиков, а какая проблема

туда спрайт вставить ?

Edited December 2, 2014 by Sergik+

[Galaxy]

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

[Sergik+]

А я откуда брал интересно иконки ? Сам рисовал штоли, есть методы которыми все пользуются,

зачем велосипед изобретать ? Кстати webfont еще и на operemini не увидите.

Сейчас всего два метода отображения иконок:

1) спрайты 2)svg, второй не советую начинающим, там куча камней подводных сам сижу

уже третью неделю все ино источники шерстю, у нас совсем инфы мало.

Если просто svg вставлять то никаких проблем, но я заодно еще и разбираюсь с

оптимизацией.

Edited December 2, 2014 by Sergik+

[npofopr]

А я откуда брал интересно иконки ?

Как бы вопрос то вообще не о том. 

И уж лучше тогда svg использовать, чем обычные png.

 

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

 

И таки бутстрап с 3 версии использует шрифт для иконок.

[Sergik+]

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

[Galaxy]

В чем собственно проблема? Из люстры насохранял иконок , и загенерил шрифт грунтом(им же можно и оптимизировать в нем сразу) или каким нибудь https://icomoon.io/

Edited December 2, 2014 by Galaxy

[PavelTkachev]

а какая разница, куда его вы внедряете? шрифт и в африке шрифт. Посмотрите тут https://github.com/h.../dist/.htaccess

 

Я хочу вставить base64 код внутрь css и там надо прописать тип файла. Какой он?

Edited December 2, 2014 by PavelTkachev

[Sergik+]

 

 

woff используйте, не надо вставлять через before - отказался я от такого способа, есть сложности с ним,

используйте просто span с классом - гораздо проще.

 

 

Почему лучше woff? У него поддержка браузерами хуже, чем у ttf

Как делать через span с классом? Я вставил content в spаn и оно не заработало?

А вообще без класса можно? Прописать символ прямо в html

 

woff даже ie9 поддерживается, написали же выше не используйте веб-шрифты - устарел метод.

[npofopr]

забудьте просто про вебшрифты, отказались почти все от них

все это кто?) где доказательства то, что устарел.

 

Я хочу вставить base64 код внутрь css и там надо прописать тип файла. Какой он?

я не понимаю о чем вы. вам зачем вообще тип файла? 

[PavelTkachev]

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

 

Хочу шрифты, чтобы вставить их через base64 в css. SVG придётся либо внедрять в html, либо при кодировании будет бjльше байт, чем в css.

[npofopr]

 

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

 

Хочу шрифты, чтобы вставить их через base64 в css. SVG придётся либо внедрять в html, либо при кодировании будет бjльше байт, чем в css.

 

Зачем base64? Вам же дали выше пример. Посмотрите как это делает http://fortawesome.github.com/Font-Awesome/

[Sergik+]

 

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

 

Хочу шрифты, чтобы вставить их через base64 в css. SVG придётся либо внедрять в html, либо при кодировании будет бjльше байт, чем в css.

 

Для оптимизации даже css онлайн делают а вы svg испугались )

[PavelTkachev]

Я хочу вставить base64 код внутрь css и там надо прописать тип файла. Какой он?

я не понимаю о чем вы. вам зачем вообще тип файла? 

 

 

Для GIF будет url(data:image/gif;base64,

 

Что будет для ttf, eof, woff, svg?

[Galaxy]

Что будет для ttf, eof, woff, svg?

Генериться иконочный шрифт, делается иницилизирующий шрифт класс и класс самой иконки, в которой через before + content вставляется контент иконки

[PavelTkachev]

Зачем base64? Вам же дали выше пример. Посмотрите как это делает http://fortawesome.github.com/Font-Awesome/

 

 

Я уже все картинки закодировал в css. Дайте мне и шрифты туда же поместить.

[Sergik+]

http://frontender.info/ten-reasons-we-switched-from-an-icon-font-to-svg/   статья хорошая, на

фронталксе 2014 тоже в веб-шрифты плевали все кому не лень.

[Galaxy]

http://frontender.in...on-font-to-svg/   статья хорошая, на фронталксе 2014 тоже в веб-шрифты плевали все кому не лень.

Это все конечно очень круто, но вы часто сталкиваетесь с проблемами описанными в этой статье? 

[PavelTkachev]

data:font/truetype; 

Вот что я хотел услышать.

[Sergik+]

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