Search the Community

Добрый день! Подскажите источник, от куда можно импортнуть в свой css файл шрифт DS-DIgital(шрифт как на старых циферблатах, нужен для отображения циферблата на таймере). Не могу скачать к себе на комп - балуюсь в рабочее время на рабочем компе. И на работе запрет на скачивание без ведома админов чего угодно.

Всем привет! Подскажите с подключением сторонних шрифтов... 1. Предположим мне надо подключит какой то шрифт с разными начертаниями, могу ли я использовать одно имя шрифта в font-family, будет ли в таком случае использоваться правильное - подключенное начертание в зависимости от font-weight ? 2. Проверить, есть ли шрифт в системе(чтоб его не грузить лишний раз), можно с помощью local, такого перечисления думаю достаточно, чтоб наверника проверить: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin') ? Я подключаю так(для каждого начертания через тире указано начертание): @font-face { font-family: "Roboto-Thin"; src: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin'), '/fonts/Roboto-Thin.woff2' format('woff2'), '/fonts/Roboto-Thin.woff' format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: "Roboto-Light"; src: local('RobotoLight'), local('Roboto Light'), local('Roboto-Light'), '/fonts/Roboto-Light.woff2' format('woff2'), '/fonts/Roboto-Light.woff' format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: "Roboto-Regular"; src: local('RobotoRegular'), local('Roboto Regular'), local('Roboto-Regular'), '/fonts/Roboto-Regular.woff2' format('woff2'), '/fonts/Roboto-Regular.woff' format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: "Roboto-Black"; src: local('RobotoBlack'), local('Roboto Black'), local('Roboto-Black'), '/fonts/Roboto-Black.woff2' format('woff2'), '/fonts/Roboto-Black.woff' format('woff'); font-weight: 900; font-style: normal; }

Здравствуйте. Подскажите, пожалуйста аналог Times New Roman MT Extra Bold , а то он только с латиницей работает. Спасибо.

Иногда при подключении шрифтов возникает следующая ситуация: Текст просто текст. Без оберток. Проблема возникает в хроме и почти всегда если шрифт используется в срытых (разворачиваемых) блоках или слайдерах (Owl Carousel), то есть на блоках который сначала не отображаются, а появляются позже. От чего это может происходить, и что с этим можно сделать? P.S. Создать JSFiddle с этой проблемой не удалось.

На сайте подключен Open Sans и из-за этого элементы, которым не указана ширина, получаются в пикселах с процентами. Например кнопки: Из-за этого возникает проблема, когда я хочу добавить псевдоэлемент внутри во всю ширину этой кнопки (нужен для эффекта), справа от него получается зазор, где виден фон, несмотря на то, что указано right: 0: Это можно, как-то исправить без явного указания размеров?

Глупый наверное вопрос. Если я открываю макет, в котором используются шрифты, которых нет у меня в системе, он будет показан, как его задумывал дизайнер или шрифты заменятся на другие? Могу я не устанавливая шрифтов делать скриншот и спокойно верстать? Разумеется не трогая текстовых слоев и не нажимая вот тут "ОК" Можно ли из .psd файла получить все используемые шрифты, допустим в текстовый файл? Какие инструменты есть для работы со шрифтами (сохранить в другой формат, вырезать лишнее и т. д.)?

Здравствуйте! Столкнулась с проблемой отображения шрифта на компьютере Заказчика и моем. У Заказчика Mac, шрифт у него выглядит жирнее, у меня Windows. Сейчас подключаем с Google. Как решить данную проблему, чтобы у всех было одинаково? Попробую подключить через @font-face с помощью http://www.fontsquirrel.com/ Теперь вопрос: как правильно настроить его?

Здравствуйте! Мне немного непонятно по поводу подключения нестандартных шрифтов. Как понять какие именно шрифты нужно подключать? Те, которые показывает что не хватает фотошоп? Ели да, то почему когда я закомментировал подключение шрифта в css через google fonts, браузер мне все равно показывает текст этим шрифтом?

Небольшое предисловие: В компании, где я работаю, строго запрещено иметь нелицензионный софт, поэтому иногда приходится извращаться. Если вы ярый сторонник торрентов, то можете смело проходить мимо, ибо для вас всё сильно проще. А остальным я предлагаю решение, которое я гуглил месяцами, но все равно не нашел ничего похожего. Наткнулся я на него совершенно случайно. Итак погнали... Задача: сгенерировать иконочный шрифт из макета, который нам отдали в PSD. Что нам понадобится: 1) Photoshop (думаю версия не имеет значения, например у меня CS5) 2) Inkscape (опенсорсный векторный редактор) 3) Любой текстовый редактор (у меня Sublime Text 2) 4) https://cloudconvert.org - сайт, который умеет конвертировать файлы в SVG 5) https://icomoon.io - генератор иконочных шрифтов Шаг первый: в макете находим нужную иконку, она должна быть векторная (т.е. это должен быть Shape), если иконка растровая, то её нужно конвертировать в вектор после этого нужно обрезать макет по размеру иконки (Crop Tool) Шаг второй: нужно убрать все слои, кроме необходимого нам (того, что с иконкой), для этого создаём новый файл (File -> New) и перетаскиваем в него нужный нам слой из макета, после этого сохраняем файл (File -> Save As), в появившемся меню выбираем формат .eps (Encapsulated PostScript) Шаг третий: лезем на сайт CloudConvert выбираем наш .eps-файл и конвертируем его в .svg, далее нужно очистить его от всего говна, которое образовалось там после конвертации Шаг четвертый: открываем получившийся .svg в любимом текстовом редакторе, ищем там тег <path />, кроме этого тега нам больше ничего не понадобится, всё остальное можно смело стирать, из самого тега <path /> удаляем все атрибуты, кроме d="" (там собственно путь) и стиля clip-rule (он отвечает за "дырки" внутри иконки). Шаг пятый: ручками делаем новый чистенький SVG <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" version="1.1"> <path style="clip-rule: evenodd;" d="<!-- тут собственно путь -->" /></svg>Шаг шестой (возможно необязательный): у меня после конвертации иконка получилась кверху ногами, да ещё и 15px превратились в 150px (т.е. размер увеличился в 10 раз), хз почему так. но чтобы это пофиксить нам понадобится Inkscape, создаём там файл нужного размера (например 32х32 - я обычно этот размер для шрифтов юзаю), загружаем туда наш .svg и отражаем его по вертикали и подгоняем под нужный размер, затем сохраняем как SVG (Inkscape опять надобавляет в код своего говна типа метаданных и прочей лабуды, по желанию вычищаем всё это оттуда) Шаг седьмой: лезем на сайт IcoMoon и генерим шрифт Всем спасибо за внимание! Предложения по улучшению моего алгоритма действий приветствуются. На возникшие вопросы обязательно отвечу.

Допустим, я хотел бы использовать на сайте какой то нестандартный шрифт, например, представленный на картинке. И я собираюсь подключить его через директиву @font-face. Отсюда: Вопрос 1: Шрифты подключаемые через @font-face лежат на сервере вместе со всеми файлами которые составляют сайт. Т.е. по идее они будут доступны всегда, когда доступен сам сайт. Нужно ли в этом случае указывать другие "безопасные шрифты" в свойстве font-face? Допустим указывать нужно (мало ли что). Отсюда Вопрос 2 Как определить какой из "безопасных шрифтов, т.е. тех шрифтов, которые есть у практически любого пользователя нужно указывать? Как я понимаю, нужно найти список этих безопасных шрифтов, например здесь - http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html и просто визуально ищем шрифт который максимально схож с нашим нестандартным, верно? Так, например, на шрифт представленный на картинке, как мне кажется похож Lucida Console. Правильно ли я рассуждаю или есть какой то другой подход к решению этой задачи?

Приведите примеры способов верстки, когда шрифт уменьшается/увеличивается в зависимости от размера экрана. Процентное измерение не помогает. Текст сайта на маленьких устройствах сваливает за рамки блоков. http://www.designforge.ru/

Ищу кириллический шрифт в японском стиле. Какой-нибудь самурайский шрифт что ли, нарисованый кистью, что бы буквы были похожи на иероглифы. Ну и было бы круто, если бы кто-нибудь посоветовал такой ресурс, на котором такое добро водится Вот этот классный, но тут Latin. http://www.fontspace.com/category/asian

В последнее время шрифты вынесли мне все мозги. Давайте запишем сюда все, что мы знаем о проблемах со шрифтами. 1) Вебкит некоторые шрифты криво рендерит - выход, заставить его отображать первым svg 2) firefox не понимает svg, и когда он начинает криво рендерить - почти безвыходная ситуация, хотя мне удалось подключить otf формат, но шрифт выглядел мягко сказать иначе, но зато без зазубрин и обрезания. 3) сервис font-squirrel в режиме оптимизации генерит шрифты без кириллицы (а может лишь некоторые и тогда это баг). 4) Некоторые сервисы, в число которых входит фонт сквиррел криво генеряет eot - выход, генерить с помощью программы на вашем компьютере. 5) Если вы поставили шрифт, а его не видно - скорее всего шрифт не содержит кириллицу. 6) Если шрифт вдруг выглядит корявенько, можно попробовать поставить ему четный размер. Прошу поделиться хорошими сервисами генерации шрифтов, которые не выдадут в результате кривой шрифт, а также сервисы, где содержится много шрифтов. http://www.google.com/fonts http://www.xfont.ru/ - много шрифтов, содержащих кирриллицу. Генераторы http://www.fontsquir...bfont-generator http://www.font-face-generator.com/ http://everythingfon...ce#.Ui9YpMbIb3Q - может кушать otf

Есть шрифт "Helv4Light" это два файла: "Helv-4-Light.pfb" и "Helv-4-Light.pfm" в стилях подключаю так: @font-face { font-family: Helv4Light; /* Гарнитура шрифта */ src: url(Helv4Light.pfb); /* Для IE5-8 */ src: local(Helv4Light), url(Helv4Light.pfb); /* Для остальных браузеров */ } body{ font-family:Helv4Light; font-size: 12px; line-height: 30px; color:#222; background:#FFF; } Но на сайте шрифт не меняется. Подскажите в чем может быть проблема? Спс.

Привет всем! У меня наметилась такая проблема: делаю шаблон на html5, но не могу подключить шрифт. Вроде бы все делаю правильно, прописываю нужный код в css-файле, но все-равно ничего не выходит. Может, кто-нибудь скажет — почему так?

Подключаю два шрифта к своему сайту с помощью: @font-face { font-family: 'a_bodoninovabrkbold'; src: url('../fonts/a_bodoninovabrk_bold-webfont.eot'); src: url('../fonts/a_bodoninovabrk_bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/a_bodoninovabrk_bold-webfont.woff') format('woff'), url('../fonts/a_bodoninovabrk_bold-webfont.ttf') format('truetype'), url('../fonts/a_bodoninovabrk_bold-webfont.svg#a_bodoninovabrkbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'a_machinaortoshtregular'; src: url('../fonts/a_machinaortosht_regular-webfont.eot'); src: url('../fonts/a_machinaortosht_regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/a_machinaortosht_regular-webfont.woff') format('woff'), url('../fonts/a_machinaortosht_regular-webfont.ttf') format('truetype'), url('../fonts/a_machinaortosht_regular-webfont.svg#a_machinaortoshtregular') format('svg'); font-weight: normal; font-style: normal; } Шрифт 'a_machinaortoshtregular' подключается без проблем, а вот первый не хочет, хотя в index.html, который мне создал http://www.fontsquirrel.com/tools/webfont-generator он отображается без проблем, в чем дело?