Гайдлайн по iOS на русском. Часть 44 — Визуальный дизайн: Типографика | by Ruslan Sharipov
6 min read·
May 25, 2022Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна (лайк, подписка и тд). В этой серии постов я делюсь вольным переводом iOS гайдлайна на русский язык. Как и с переводом Material Design все части будут объеденены в 1 notion документ. Оригинальный источник этой части: здесь.
Apple дает вам два семейства, которые вы можете использовать в iOS приложениях.
Сан-Франциско — это семейство гарнитур без засечек, которая включает SF Pro, SF Pro скругленный, SF Mono, SF Compact и SF Compact скругленный. SF Pro — это системный шрифт в iOS, macOS и tvOS; SF Compact — системный шрифт в watchOS. Эти шрифты спроектированы в соответствии с интерфейсами платформ; эти системные шрифты разборчивы и нейтральны по характеру.
Нью-Йорк — это гарнитура с засечками, которая обеспечивает уникальный тон, разработанный в дополнение к шрифтам SF. NY работает хорошо как в контексте графики (при больших размерах), так и в контексте чтения (при размерах наборного текста).
Скачать оба семейства можно здесь.
Начиная с iOS 14, система предусматривает также что гарнитуры San Francisco и New York доступны в формате вариативных шрифтов. Этот формат объединяет различные стили шрифтов в одном файле и поддерживает интерполяцию между стилями для создания промежуточных. С помощью интерполяции шрифты могут адаптироваться ко всем размерам, при этом они выглядят будто специально разработанны для каждого размера.
Интерполяция также позволяет осуществлять оптическую калибровку, что связана с созданием различных типографских макетов для соответствия различным размерам устройств. В iOS 14 и более поздних версиях системные шрифты поддерживают динамические оптические размеры, совмещая дискретные оптические размеры шрифта, такие как “Text” и “Display” для SF Pro и SF Compact, а также “Small”, “Medium”, “Large” и “Extra large” для New York, в единый непрерывный дизайн. Такая конструкция позволяет интерполировать каждый глиф или буквенную форму для получения структуры, точно адаптированной к размеру точки.
📌 От автора: Когда ты проектируешь под iOS у тебя SF семейство подразделяется еще на два подсемейства: “Text” и “Display”. В Apple это называют “Optical Sizes”. Подсемейство Text предназначены для текстов малого размера, тогда как Display — для больших размеров.
📌 Использование вариативных шрифтов, на устройстве работающем на более ранней версии iOS, может привести к неожиданным результатам. В этом случае продолжайте использовать обычные “Text” и “Display” подсемейства.
Поскольку SF Pro и NY совместимы, существует множество способов добавить контраст в контексте типографики и разнообразие в ваши макеты iOS, сохраняя при этом неизменный внешний вид. Например, использование обоих шрифтов может помочь вам создать более прочную визуальную иерархию или выделить семантически что-либо в контенте.
Шрифты, разработанные Apple, поддерживают широкий диапазон начертаний, размеров, стилей и языков, поэтому вы можете создавать удобный опыт чтения во всем приложении. Когда вы используете текстовые стили и системные шрифты, вы также получаете поддержку динамического шрифта и поддержу для больших размеров в специальных возможностях системы, которые позволяют пользователям выбирать подходящий для них размер текста на уровне всей системы. Конкретные значения см. таблицах. Информация о размерах, включая значения трекинга, также доступна в Sketch, Photoshop и Adobe XD, которая лежит Apple Design Resources для iOS.
У системы iOS есть API, которые упрощают использование шрифтов SF и NY.
Гибкость системных шрифтов помогает вам добиться оптимальной разборчивости при любом размере и обеспечивает широту и глубину, необходимые для точного набора текста во всем вашем приложении.
Скругленный вариант системных шрифтов может помочь вам согласовать стиль текста с внешним видом мягких или скругленных элементов интерфейса или передать нужное настроение в типографике.
SF Mono — это моноширинный вариант Сан-Франциско, то есть шрифт, в котором все символы равны по ширине. Обычно вы используете моноширинный шрифт, когда хотите выровнять столбцы текста, например, в приложениях для программирования. Например, Xcode и Swift Playgrounds по умолчанию используют SF Mono.
Классическая гарнитура с засечками, которую можно использовать в интерфейсе для передачи традиционного стиля чтения текста.
Используйте встроенные текстовые стили, когда это возможно. Встроенные текстовые стили позволяют стилизовать контент визуально четкими способами, сохраняя при этом оптимальную разборчивость. Эти стили, включая заголовок, основной текст, выноску и несколько размеров заголовка, основаны на системных шрифтах и позволяют использовать ключевые типографские функции, такие как динамический шрифт, который автоматически подстраивает трекинг и интерлиньяж для каждого размера шрифта.
Подчеркните важную информацию. Используйте начертание, размер и цвет шрифта, чтобы выделить наиболее важную информацию в вашем приложении.
Расставляйте приоритеты в содержании при реагировании на изменения размера текста. Не все материалы одинаково важны. Когда кто-то выбирает больший размер в системе, он хочет облегчить чтение интересующего его контента; он не всегда хочет, чтобы каждое слово на экране было больше.
Сведите к минимуму количество шрифтов, которые вы используете в своем интерфейсе. Смешивание большого количества разных шрифтов может привести к тому, что ваше приложение будет выглядеть фрагментированным и неаккуратным.
Измените интерлиньяж (высоту строки), чтобы улучшить удобочитаемость или сэкономить место. Интерлиньяж — это пространство между строками текста. В некоторых случаях текстовые макеты работают лучше, когда вы увеличиваете или уменьшаете это пространство. При отображении текста в широких колонках или длинных отрывках текста бОльшее пространство между строками может облегчить людям слежение за строчками при переходе от одной к следующей. И наоборот, если вам нужно отобразить две строки текста в области, где высота ограничена — например, в строке списка, — уменьшение интерлиньяжа может помочь тебе уместить текст. Если вам нужно отобразить три или более строк текста, избегайте плотного интерлиньяжа даже в областях, где высота ограничена.
Убедитесь, что кастомные шрифты разборчивы. Кастомные шрифты поддерживаются в iOS, но они могут быть сложны для чтения, особенно если у них есть стилистические атрибуты, которые затрудняют распознавание букв в небольших размерах. Если у вашего приложения нет настоятельной потребности в кастомном шрифте — например, в целях брендинга или для создания погружающего игрового опыта, — обычно лучше придерживаться системных шрифтов. Рассмотрите возможность использования кастомного шрифта только для заголовков; если вы используете его для наборного текста или текста в контролах, убедитесь, что он разборчив, даже при небольших размерах.
Реализуйте специальные возможности для кастомных шрифтов. Системные шрифты автоматически реагируют на системные настройки специальных возможностей, такие как полужирный текст и более крупный шрифт. Реализуйте такое же поведение в приложениях, использующих кастомные шрифты, убедившись, что функции специальных возможностей включены.
Подкручивайте трекинг по мере необходимости в макетах. В запущенном приложении системные шрифты динамически подкрутят трекинг для каждого размера. Чтобы создать пиксель-перфект макет, который использует вариативные системные шрифты, вам может потребоваться вручную настроить трекинг.
Динамический шрифт обеспечивает дополнительную гибкость, позволяя юзерам выбирать предпочитаемый размер текста. Ниже представлены начертания, размеры и начальные значения для каждого стиля текста при разных размерах динамического шрифта.
В дополнение к стандартным размерам, система предлагает ряд бОльших размеров для юзеров с ограниченными возможностями. Ниже приведено начертание, размер, а также значения для каждого стиля текста.
Чтобы помочь вам создать аккуратные макеты, используйте значения трекинга, которые система предлагает для различных размеров SF Pro, SF Pro со скругленными формами, а также для гарнитуры Нью-Йорк.
30 бесплатных новогодних шрифтов для создания праздничного настроения🎄
Вы хотите сделать действительно впечатляющую открытку или дизайн для грядущего праздничного сезона?
Порой эта задача может застать врасплох. Какие образы использовать? Какие цвета подойдут лучше всего? А что насчет шрифтов? К счастью для вас, мы собрали 30 отличных вариантов, вдохновленных Новым годом и Рождеством. 15 латинских шрифтов и 15 шрифтов на кириллице (есть возможность использовать русский язык).
Они точно привнесут в ваш дизайн праздничное настроение. И, что немаловажно, все эти варианты полностью бесплатны! Вы можете скачать эти новогодние шрифты и загрузить их в редактор Flyvi.
Латинские шрифты1. One Starry NightЭто очень приятный шрифт, похожий на рукописный. Встречающиеся в его символах вихри и завитушки придают ему энергичности, а тонкость букв делает легким и воздушным.
Скачать шрифт с Fontspace
2. Metro Retro NFРельефная форма и пунктирные линии из точек придают этому шрифту кружевной вид. В нем присутствуют кубические, но утонченные формы, а также нотки ретро-стиля (отсюда и название). Благодаря кружевному орнаменту шрифт не кажется устаревшим и приобретает праздничное настроение.
Скачать шрифт с 1001 Fonts
3.
SentinelЭтот крученый шрифт выглядит великолепно. Заглавная буква по классике оформлена гораздо выразительнее остальных, что сразу выделяет начало предложения. Данный шрифт встречался в старых рождественских книжках, поэтому он наверняка вызовет самые приятные воспоминания.
Скачать шрифт с 1001 Fonts
4.
Chopin ScriptКаллиграфические шрифты всегда отлично подходят для праздничного дизайна, и Chopin Script не является исключением. Тонкие буквы в сочетании с аккуратными акцентными линиями создают по-настоящему элегантную гарнитуру, которая будет выглядеть уместно почти на всех рождественских открытках.
Скачать шрифт с 1001 Fonts
5. Mountains of ChristmasНеряшливость этого шрифта создает игривую и беззаботную атмосферу. Тонкие засечки в сочетании с мягким изгибом придают ему уникальный характер и прекрасно подойдут для иллюстраций на праздничную тематику.
Скачать шрифт с Font Squirrel
6. St. NicholasЛегкая рельефность этого шрифта придает ему неповторимый зимний облик. Строгие буквы смягчаются вырезами, напоминающими ямки в снегу. Они создают приятный контраст, который компенсируется акцентными завихрениями на заглавных буквах.
Скачать шрифт с DaFont
7.
HarringtonЭтот шрифт — старая добрая классика. Он чистый, но в то же время имеет декоративные акценты с небольшими наклонами и изгибами. Гарнитура обладает уникальным характером и хорошо подходит для заголовков.
Скачать шрифт с Fontspace
8.
Alex BrushШирокие буквы и толстые линии делают этот шрифт легко читаемым. Он идеально подходит как для заголовков, так и для короткого основного текста.
Скачать шрифт с Font Squirrel
9. Hand Stockyard FontЭтот красивый шрифт будто написан кистью. Его нежная текстура и быстрые штрихи придают ему элегантный, но при этом не чересчур вычурный вид. Он имитирует настоящий почерк, что всегда идет на пользу праздничному дизайну.
Скачать шрифт с Fontspace
10.
HarbellПодчеркните заголовок вашего рождественского дизайна этим смелым каллиграфическим шрифтом, будто написанным кистью. Обязательно используйте его в сочетании с простой гарнитурой с засечками, чтобы уравновесить дизайн.
Скачать шрифт с Dafont
11.
NickelodeonNickelodeon — это красивый, тонкий и незамысловатый шрифт. Простые засечки и стремительные изгибы букв придают ему индивидуальность. Этот невероятно сдержанный шрифт хорош как сам по себе, так и в сочетании с другими гарнитурами.
Скачать шрифт с Fontspace
12.
Sunny Winter in TexasSunny Winter — очень тонкий, но притягательный шрифт. Он кажется самобытным и рукописным, создает приятную атмосферу и хорошо смотрится в паре с более жирным акцентным шрифтом.
Скачать шрифт с Fontspace
13.
Holleigh CapsЭтот элегантный и женственный шрифт украшен остролистом — одним из традиционных символов Рождества. Он полностью прописной, но буквы все равно хорошо сочетаются друг с другом благодаря своей тонкой и нежной структуре.
Скачать шрифт с Fontspace
14.
LandliebeОчаруйте читателей своих пожеланий нестандартным, приземленным шрифтом. Landliebe дополнит как традиционный, так и эксцентричный рождественский дизайн.
Скачать шрифт с Font Squirrel
15.
Candy CaneЭтот задорный шрифт оформлен в виде загнутых карамельных тросточек. В конце концов, это один из главных символов рождественских праздников! Плавность закругленных краев прекрасно сочетается со сложной и динамичной штриховкой и помогает смягчить ее.
Скачать шрифт с Dafont
Кириллические шрифты16. A_BraggaStarsЭтот атмосферный шрифт просто создан для поздравлений с наступающим Новым годом и Рождеством. Он идеален для заголовка. Насыщенные полновесные символы не случайно разделены надвое. Они символизируют встречу старого и нового года. А это всегда загадка, тайна. Но все будет замечательно. Символы, пронизанные волшебными снежинками, обещают нам это.
Скачать шрифт с Old.fonts
17. FirebugRUSБуквы, припорошенные снегом, горят белыми язычками пламени. Это и есть задорный шрифт FirebugRUS. От него веет волшебной сказкой. Шрифт очень динамичный, отлично подойдет для новогоднего приглашения.
Скачать шрифт с Old.fonts
18. Humanoid TyphoonШрифт со снежным обрамлением. Каждая буква помещена в декоративный скафандр. Но удивляться не стоит – зимой должно быть тепло всем!
Скачать шрифт с Old. fonts
19. MajesticИзысканный шрифт очарует вас безупречной каллиграфией. Мягкие скругленные засечки очень уютно смотрятся в рукописной имитации. А заглавная буква, похожая на королевский вензель, придаст вашему поздравлению особую торжественность.
Скачать шрифт с Ffont
20. SnowflakeВ геометрии шрифта Snowflake чудится что-то нерукотворное, как будто природа сама вылепила из снега новогоднее поздравление. Широкие увесистые буквы очень напоминают пушистые снежные комочки. Этот шрифт отлично дополнит новогодний дизайн.
Скачать с Old.fonts
21. English RoseЭлегантный Шрифт English Rose оформит ваше поздравление в готическом стиле. Очень интересен дизайн символов: верх в форме цветка плавно переходит в едва заметную штриховку. Это придает буквам особый аристократизм, а средневековый антураж создает атмосферу загадочности.
Скачать с Old.fonts
22. FortunataCYRМожно ли написать на бумаге так же, как на снегу? Можно, если использовать шрифт FortunataCYR. Причудливый изгиб символов напоминает снежные завитки. Только от них не холодно. Наоборот, ощущаешь особую новогоднюю радость и задор.
Скачать с Old.fonts
23. MoonlightЛуноликий шрифт Moonlight дарит нам волшебство древней Аравии. Легкая арабская вязь усеяна мириадами звезд. Может быть, это Ходжа Насреддин в образе звездочета спешит поздравить нас с наступающим Новым годом?
Скачать с Ofont
24. Cute NotesАкцентный шрифт Cute Notes во сто крат усилит ваши добрые пожелания в новом году. Здесь каждый символ заключен в рамку, но это ни в коем случае не утяжеляет конструкцию поздравления. У символов разный наклон. Буквы как будто исполняют неспешный танец, и это придает тексту доверительный и немного трогательный настрой.
Скачать с Ofont
25. MalahitЧудесный шрифт Malahit очень украшает текст и скруглением символов, и акцентной заглавной буквой. Интересно, что слово «малахит» произошло от греческого слова, означающего «мягкий». Этот шрифт именно такой – мягкий и нежный.
Скачать с Ffont
26. Modernist ThreeЭтот новаторский шрифт в стиле модерн помогает на многое взглянуть по-новому. Нетрадиционный подход в изображении символов, потрясающая работа с формой – все это говорит нам о том, что пора отпустить прошлое. Впереди радостная встреча с друзьями на новогодней вечеринке. И пусть праздничное приглашение, написанное шрифтом Modernist Three, сыграет роль доброго волшебника в жизни отправителя и получателя.
Скачать с Ffont
27. PudelinkaВеселый шрифт Pudelinka дарит нам радость предстоящего праздника.
Неровный строй символов, мерцающие звездочки, замысловатые засечки вносят нотку сказочности в новогодний дизайн.
Скачать с Fonts
28. Zanesennyj«Лед и пламень» — это про эклектичный шрифт Zanesenny. Широкие снежные буквы как будто чуть-чуть расплавились сверху от новогоднего огня. Этот контрастный шрифт отлично подойдет для приглашения на новогодний карнавал.
Скачать с Ffont
29. Mr_CountryhouseGЭтот непринужденный шрифт отлично подойдет для неформального
приглашения. Чуть удлиненные буквы, неприхотливые скругленные завитки погружают читателя в атмосферу романтичности и домашнего уюта.
Скачать с Myfonts
30. SladkoeshkaНенавязчивые декоративные элементы очень украшают шрифт Sladkoeshka, делая его практически универсальным. Это свойственно всем шрифтам, имитирующим рукопись. Нарядный шрифт Sladkoeshka украсит любое праздничное поздравление.
Скачать с Myfonts
Кстати, в редакторе Flyvi пополнение новогодних шаблонов для открыток, обложек сообществ ВК, публикаций и многого другого. Объединяйте их с понравившимися шрифтами и получайте самые атмосферные дизайны.
С наступающим 🎄
Использование пользовательского шрифта с динамическим шрифтом
Использование пользовательского шрифта с динамическим шрифтом всегда было возможно, но требовалось приложить некоторые усилия, чтобы заставить его масштабироваться для каждого стиля текста, когда пользователь изменял размер динамического шрифта. Apple представила новый класс метрик шрифтов в iOS 11, который делает его гораздо менее болезненным.
Последнее обновление: 10 ноября 2022 г.
Динамический тип
Apple представила динамический тип еще в iOS 7, чтобы дать пользователю общесистемный механизм для изменения предпочтительного размера текста в настройках системы.
Для поддержки динамического типа вы устанавливаете метки, текстовые поля или текстовые представления на шрифт, возвращаемый методом класса UIFont
selectedFont(forTextStyle:)
. Возвращенный шрифт, в котором используется гарнитура Apple San Francisco, имеет размер и насыщенность, скорректированные в соответствии с предпочтениями пользователя по размеру и предполагаемым стилем текста.
Например, чтобы создать метку со стилем основного текста:
let label = UILabel() label.font = UIFont.preferredFont(forTextStyle: .body) label.adjustsFontForContentSizeCategory = true
Примечания:
Apple добавила свойство
AdjustsFontForContentSizeCategory
вUILabel
,UITextField
иUITextView
в iOS 10. Когдаtrue
, шрифт автоматически обновляется, когда пользователь меняет свой предпочтительный размер шрифта. Для iOS 9 и более ранних версий вы прослушиваете уведомлениеUIContentSizeCategoryDidChange
и вручную обновляете шрифт.Из iOS 10 вы также можете получить шрифт, совместимый с чертами (например, классом размера), используя
предпочтительный шрифт (для стиля текста: совместим с:)
.Было шесть значений
UIFontTextStyle
, когда они были представлены в iOS 7 (.headline
,.subheadline
,.body
,.footnote
,.caption1 9 0016,
заголовок2
). iOS 9 добавила еще четыре стиля (.title1
,.title2
,.title3
и.callout
). В iOS 11 добавлен стиль больших заголовков (.largeTitle
).
Вот как различные стили текста выглядят в очень маленьком, большом и сверх-очень-очень большом размерах для специальных возможностей:
Обратите внимание, как все стили текста увеличиваются в размере с увеличением размера для специальных возможностей.
.body
.Масштабирование пользовательского шрифта
До iOS 11 для поддержки динамического типа с пользовательским шрифтом вам нужно было определить детали шрифта (начертание и размер шрифта) для каждого из десяти стилей текста, а затем решить, как масштабировать эти варианты шрифта для каждого из двенадцати категорий размера контента.
Apple публикует метрики шрифта, которые они используют для шрифта San Francisco, в Руководстве по человеческому интерфейсу iOS, которое служит полезной отправной точкой при принятии решения о том, как масштабировать каждый стиль текста.
Например, текстовый стиль .headline
использует шрифт Semi-Bold, который составляет 17 пунктов при большом размере содержимого и 23 пункта при размере xxxLarge.
Font Metrics
Чтобы упростить масштабирование пользовательского шрифта для динамического типа, Apple представила UIFontMetrics
в iOS 11. Чтобы использовать собственный шрифт для заданного стиля текста, вы сначала получаете метрики шрифта для этого стиля, а затем используете его. для масштабирования вашего пользовательского шрифта.
Давайте вернемся к примеру установки метки в текстовом стиле .body
, но с пользовательским шрифтом. Основной подход таков:
let font = UIFont(name: fontName, size: fontSize) пусть fontMetrics = UIFontMetrics (forTextStyle: .body) label.font = fontMetrics.scaledFont (для: шрифт)
Вы создаете свой шрифт с пользовательским шрифтом и размером. Получите метрики шрифта для стиля .body
, а затем используйте scaledFont(for:)
, чтобы масштабировать шрифт для предпочтительного размера текста.
Класс UIFontMetrics
устраняет необходимость поддерживать таблицу шрифтов (гарнитура и размер) для каждой из двенадцати категорий размера содержимого. Вам по-прежнему необходимо выбрать шрифт для каждого стиля при размере содержимого по умолчанию. Этот размер шрифта затем масштабируется в соответствии с метриками шрифта, когда пользователь изменяет размер содержимого.
Словарь стилей
Чтобы избежать разброса имен и размеров шрифтов по всему коду, я остановился на словаре стилей:
typealias StyleDictionary = [StyleKey.RawValue: FontDescription]
Ключ стиля словаря представляет собой перечисление с String
необработанными значениями и регистром для каждого из текстовых стилей:
enum StyleKey: String, Decodable { регистр большойНазвание,название,название2,название3 заголовок дела, подзаголовок, тело, выноска case сноска, заголовок, заголовок2 }
Значения словаря стилей представляют собой структуру, содержащую имя и размер шрифта для использования в этом текстовом стиле:
struct FontDescription: Декодируемый { пусть fontSize: CGFloat пусть имя_фонта: строка }
И ключ, и значение Декодируемые
, так что я могу прочитать словарь стилей из файла plist
. Вот как выглядит шрифт Noteworthy, который Apple поставляет с iOS. У него одновременно жирный и светлый шрифт:
Я придерживался размеров шрифта, которые Apple использует для размера текста .large
для каждого стиля. Так, например, я использовал 17-pt Noteworthy-Bold для шрифта 9.0015 .headline и 17-pt Noteworthy-Light для .body
.
Чтобы применить шрифты, я помещаю словарь в структуру ScaledFont
, которую вы инициализируете именем файла plist
(без расширения). По умолчанию предполагается, что файл plist
находится в основном пакете. Затем метод font(forTextStyle:)
возвращает масштабированный шрифт для каждого стиля текста:
public struct ScaledFont { public init(fontName: String, bundle: Bundle = .main) общедоступный функциональный шрифт (forTextStyle textStyle: UIFont.TextStyle) -> UIFont }
Проверьте код для получения полной информации, но вот интересный метод, который ищет шрифт для стиля текста, а затем использует
для возврата масштабированного шрифта. Если в словаре стилей нет записи для стиля текста, он возвращается к предпочтительному шрифту Apple:
public func font(forTextStyle textStyle: UIFont.TextStyle) -> UIFont { охранять пусть styleKey = StyleKey(textStyle), пусть fontDescription = styleDictionary?[styleKey.rawValue], пусть шрифт = UIFont (имя: fontDescription.fontName, размер: fontDescription.fontSize) еще { вернуть UIFont.preferredFont (forTextStyle: textStyle) } пусть fontMetrics = UIFontMetrics (forTextStyle: textStyle) вернуть fontMetrics.scaledFont (для: шрифт) }
Чтобы использовать это с Noteworthy.plist
, я лениво загружаю его в контроллер представления:
private let fontName = "Noteworthy" частный ленивый var scaledFont: ScaledFont = { вернуть ScaledFont (имя_шрифта: имя_шрифта) }()
Затем при установке шрифта для метки я вызываю font(forTextStyle:)
:
let label = UILabel() label. font = scaledFont.font(forTextStyle: textStyle) label.adjustsFontForContentSizeCategory = true
Пока вы масштабируете шрифт с помощью UIFontMetrics
свойство AdjustsFontForContentSizeCategory
по-прежнему работает, поэтому вам не нужно беспокоиться об обновлении, когда пользователь изменяет размер. Вот как это выглядит с использованием шрифта Noteworthy.
Примечание. Я не уверен, является ли это ошибкой или «функцией», но стиль .caption2
, кажется, масштабируется больше, чем стиль
, даже несмотря на то, что он использует меньший размер точки . большой размер
.
Использование пользовательского шрифта
Вы не ограничены шрифтами, включенными в iOS. Это NotoSans, загруженный из шрифтов Google (проверьте лицензию любых шрифтов, которые вы загружаете, если поставляете их вместе с приложением). У него есть обычные, полужирные, курсивные и жирно-курсивные начертания. Я использовал курсив для стилей подзаголовка и подписи:
Если вы загружаете и добавляете файлы пользовательских шрифтов в свой проект, не забудьте добавить их в цель и перечислить их в разделе «Шрифты, предоставляемые приложением» ( UIAppFonts
) ключ в Info. plist
:
Если вы не уверены, какие имена шрифтов использовать, вы можете распечатать все доступные имена с помощью этого фрагмента кода:
let familys = UIFont.familyNames family.sorted().forEach { печать("\($0)") пусть имена = UIFont.fontNames (forFamilyName: $ 0) печать (имена) }
Получить код
Вы можете получить полный код для этого поста в моем репозитории CodeExamples на GitHub:
- ScaledFont
Я переместил тип ScaledFont
в собственный пакет Swift, который вы можете найти здесь:
- Пакет ScaledFont Swift
Дополнительная литература
Применение того же подхода к SwiftUI:
- Масштабирование пользовательских шрифтов SwiftUI с динамическим типом
См. сеанс WWDC 2017 по динамическому типу:
- Сеанс 245 Создание приложений с динамическим типом
Чтобы узнать больше о создании адаптивных макетов с динамическим шрифтом, получите мою книгу:
- Современный автоматический макет
Поддержка динамических подмножеств и веб-шрифтов
Руководство пользователя Отмена
Поиск
- Руководство пользователя Adobe Fonts
- Введение
- Требования к системе и подписке
- Поддержка браузера и ОС
- Активируйте шрифты на вашем компьютере
- Добавьте шрифты на свой сайт
- Активировать шрифты на CC Mobile
- Лицензия на шрифт
- Лицензия на шрифт
- Управляйте своей учетной записью
- Лицензирование Creative Cloud для корпоративных клиентов
- Добавление лицензий на шрифты в вашу учетную запись
- Удаление шрифтов из библиотеки подписки
- Шрифты Adobe недоступны для пользователей Adobe ID, зарегистрированных в Китае
- Почему эти шрифты не включены в мою подписку Creative Cloud?
- Удаление шрифта Morisawa Сентябрь 2021 г.
- Получение и использование шрифтов
- Использование шрифтов Adobe в приложениях Creative Cloud
- Управляйте своими шрифтами
- Устранение отсутствующих шрифтов в настольных приложениях
- Использование шрифтов в InDesign
- Шрифты и типографика
- Использование веб-шрифтов в документах HTML5 Canvas
- Использование шрифтов в InCopy
- Как использовать шрифты в Adobe Muse
- Использование веб-шрифтов в Muse
- Упаковка файлов шрифтов
- Руководство по устранению неполадок: активация шрифтов
- Активные шрифты не добавляются в меню шрифтов
- «Невозможно активировать один или несколько шрифтов» или «Шрифт с таким именем уже установлен»
- Что происходит, когда шрифт, который я использую, обновляется литейным заводом?
- Веб-дизайн и разработка
- Добавление шрифтов на ваш веб-сайт
- Руководство по устранению неполадок: добавление шрифтов на веб-сайт
- Использование веб-шрифтов в электронных письмах или информационных бюллетенях в формате HTML
- Использование веб-шрифтов с ускоренными мобильными страницами (AMP)
- Селекторы CSS
- Настройка производительности веб-шрифтов с помощью параметров отображения шрифтов
- Коды встраивания
- Динамическое подмножество и веб-шрифты, обслуживающие
- События шрифта
- Почему мои веб-шрифты взяты с сайта use. typekit.net?
- Сайт не может подключиться к use.typekit.net
- Использование веб-шрифтов с CodePen
- Поддержка браузера и ОС
- доменов
- Использование веб-шрифтов при локальной разработке
- Политика безопасности содержимого
- Печать веб-шрифтов
- Языковая поддержка и функции OpenType
- Языковая поддержка и подмножество
- Использование функций OpenType
- Синтаксис для функций OpenType в CSS
- Технология шрифтов
- Цветные шрифты OpenType-SVG
- Ten Mincho: важные моменты по обновлению с версии 1.000
Компания Adobe разработала динамическое подмножество для размещения восточноазиатских веб-шрифтов. Большой размер восточноазиатских шрифтов — в большинстве случаев более 10 000 глифов — делает нереальной загрузку этих шрифтов на веб-сайт без существенного влияния на время загрузки.
Динамическое подмножество отслеживает любые изменения в объектной модели документа (DOM), такие как лента новостей или раздел комментариев, а затем запрашивает любые новые символы, которые необходимо добавить в подмножество. Таким образом, вместо загрузки совершенно нового шрифта загрузка шрифта просто запрашивает дополнительные глифы и выполняет обновление прямо в браузере.
Создание нового веб-проекта
При создании веб-проекта с одним из этих шрифтов параметр набора символов динамического подмножества выбирается автоматически.
Добавление шрифтов в существующий веб-проект
Поскольку для обслуживания этих шрифтов требуется динамическое подмножество, вы можете добавить их в существующий веб-проект, только если он уже использует динамическое подмножество. В меню веб-проекта будет указано, какие проекты вы можете выбрать, или вы можете выбрать создание нового веб-проекта.
Почему я вижу ошибку 404 из-за использования динамического шрифта в моем веб-браузере?
Некоторое количество ошибок 404 при обслуживании динамических веб-шрифтов является нормальным явлением.
Динамическая загрузка шрифтов просматривает символы, загруженные на страницу, и проверяет, существует ли уже подмножество шрифтов для них на use.