Search the Community
Showing results for tags 'fonts'.
Found 8 results
-
Доброго вечера! Подскажите, пожалуйста, в чем проблема неотображения скаченного шрифта? Путь к файлу, если что, проверила. Заранее спасибо! @font-face { font-family:"Lato-Italic"; src: url('./fonts/Lato-Italic.ttf'); } Его использование: .three-columns__item-radius p { text-align: justify; margin: 26px 20px 0 20px; font-family:"Lato-Italic"; }
-
Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо! <div class="three navigation items"> <nav> <ul> <li> <div class="navigation__item"></div> <a href="#">Hot themes</a> </li> <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a> </li> <li> <div class="navigation__item"></div> <a href="#">El'Classico</a> </li> </ul> </nav> </div> .navigation { background-color: rgba(31, 30, 30, 0.438); width: 900px; height: 30px; } .navigation li { display: inline-block; padding: 5px 15px; &:hover { content: ""; background-color: rgb(36, 36, 36); cursor: pointer; } } a { color: black; text-decoration: none; font-family: sans-serif; &:hover { content: ""; color: white; } }
-
Добрый день! Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело. Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать. Для начертаний bold и 300 все ок. Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ? Шрифт подключаю так: <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-Medium.woff'}}") format('woff'), url("{{asset 'Gotham-Medium.ttf'}}") format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Bold.eot'}}"); src: url("{{asset 'Gotham-Bold.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Bold.woff2'}}") format('woff2'), url("{{asset 'Gotham-Bold.woff'}}") format('woff'), url("{{asset 'Gotham-Bold.ttf'}}") format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Light.eot'}}"); src: url("{{asset 'Gotham-Light.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Light.woff2'}}") format('woff2'), url("{{asset 'Gotham-Light.woff'}}") format('woff'), url("{{asset 'Gotham-Light.ttf'}}") format('truetype'); font-weight: 300; font-style: normal; } </style> Заранее спасибо!
-
Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода: HTML: <div class="lineHeight"> HELLO // line-height method </div> <div class="padding"> HELLO // padding method </div> CSS: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); div { font-family: 'Open Sans', sans-serif; font-size: 14px; height: 100px; background: lightgreen; margin: 5px; padding-left: 10px; box-sizing: border-box; } .lineHeight { line-height: 100px; } .padding { padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующая: В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу: - Google Chrome (v. 55.0.2883.87 m); - Mozilla Firefox (v. 50.1.0); - Opera (v. 42.0.2393.94); - Safari (macOS, v. 10.0 12602.1.32.7); Для line-height отступы по 45px, для padding 46px сверху и 44px снизу: - Safari (Windows, v. 5.1.7 7534.57.2); В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу: - Internet Explorer 11 (v. 11.576.14393.0); - Microsoft EDGE (v. 38.14393.0.0); Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android): Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше. Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices". Что я пробовал для решения данной проблемы: - Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов; - Задавал размеры шрифта, отступы, line-height в em / rem / px; - Пробовал различные комбинации line-height + padding; - Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали. P.S. CSS сброшен. Meta viewport задан. Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта? -
Проблема не коретного отображения шрифтов в различных браузерах
Orysya posted a question in HTML Coding
Здравствуйте! Столкнулась с проблемой не коретного отображения в различных браузерах шрифтов. В фф опере при масштабе 100% великоват и жирнее, в хроме все всегда ок. Не подскажете как такую штуку преодолеть?))) И еще о шрифтах - не подскажете ресурс с широкой коллекцией шрифтов (не гугл фонт и вебфонт.ру))))? мне нужно подключить Tahoma и Century Gothic))) Заранее благодарю и извините, что загружаю так вопросами) http://clip2net.com/s/3h0wGoq http://clip2net.com/s/3h0wVLY -
Как фотошоп показывает отсутствующие шрифты и еще пара вопросов от новичка
Shiza posted a question in HTML Coding
Глупый наверное вопрос. Если я открываю макет, в котором используются шрифты, которых нет у меня в системе, он будет показан, как его задумывал дизайнер или шрифты заменятся на другие? Могу я не устанавливая шрифтов делать скриншот и спокойно верстать? Разумеется не трогая текстовых слоев и не нажимая вот тут "ОК" Можно ли из .psd файла получить все используемые шрифты, допустим в текстовый файл? Какие инструменты есть для работы со шрифтами (сохранить в другой формат, вырезать лишнее и т. д.)? -
Такой вопрос. На сегодняшний день занимаюсь практикой верстки. И столкнулся с такой проблемой. На psd-макете подключаются нестандартные платные шрифты. На профи-макетах таких шрифтов немного, на любительских - часто и густо. И вот я начинаю каждый раз перерывать Инет в поисках этих платных шрифтов, которые есть на макете. Естественно, когда нахожу такие, а когда и нет. Если честно, уже поднадоело такое занятие. Может, существует такой инструмент, который может мне подобрать шрифт, который является аналогом платного шрифта? Типа того - я указываю ему искомый шрифт, а он мне предлагает бесплатную альтернативу, максимально приближенную по качеству.
-
Доброго времени суток! Задача: Собственно, сабж. Есть select (не multiple), внутри каждого option должны быть звёздочки. Как сейчас: С добавлением & #9733; в нормальных браузерах работает: http://f.cl.ly/items...y2W02/stars.png А "всеми любимый" браузер (IE8) этого понять не смог: http://f.cl.ly/items...h0g/starsie.png Что пробовал: Поэтому решил юзать FontAwesome. Понятно, что html-код внутрь option'а не запихнёшь поэтому пытался сделать так: <select> <option class="starz"></option> </select> .starz { font-family: FontAwesome; content: '\f005'; } Но увы, это тоже не сработало. FontAwesome не принципиален – рассмотрю любые варианты. Главное чтобы решение было кроссбраузерно. Спасибо.
