- Question: Q: Installed system fonts not available
- Helpful answers
- Как использовать новый шрифт Apple San Francisco на веб-странице
- 11 ответов
- Последнее тестирование в 2015 г.
- Последний раз тестировался: март 2018 г.
- Шрифты в вебе, обзор от 2016 года
- Предисловие
- Вступление
- Загрузка
- FontFace
- CSS-свойства
- Использование встроенных шрифтов
- Оптимизация
- Определение текущего шрифта элемента
Question: Q: Installed system fonts not available
I use Suitcase Fusion for font management. The fonts I have installed as system fonts are not available in Pages. Any idea why??
Posted on Jul 5, 2014 12:25 PM
Helpful answers
Do you also have Font Book on your system? If so, remove it. Never have more than one font manager on your computer at a time. See the bottom of section 6 for full removal details of Font Book. Make sure to follow steps 2 and 3 as mentioned in the last line of that section. It’s very important to get Font Book’s database off the drive.
After you’ve cleared everything related to Font Book and restarted from Safe Mode, clear the current Suitcase database. You will lose any sets you’ve created when you do this. The method is pretty simple. Launch Suitcase and open its preferences. Click on the Type Core icon. Click New, and then Save. This will replace Suitcase’s current database with a new one. The only fonts which will be active after that will be only those in the System, Library, and current user account Fonts folders. All apps should then behave as expected.
I may receive some form of compensation, financial or otherwise, from my recommendation or link.
Jul 6, 2014 9:20 AM
Because Font Bork is a piece of junk that constantly corrupts its own database, declares fonts as bad that have nothing wrong with them, and is all around a crappy font manager. See my font manager reviews in the article linked to above for more detailed info.
Not mentioned in the article (as I mention here about flagging fonts as bad). I tested Font Book in Mavericks as an example. I installed Mavericks on an erased partition. Everything is pristine clean. I moved all of the fonts in the /Library/Fonts/ folder to a new folder. I then added all of these fonts to Font Book. Mind you, I moved, not copied them, so the only thing different about these just installed fonts is their path on the hard drive. Font Book declared every one of them as damaged and marked them with a yellow caution sign.
Font Book is a light use font manager for the typical home user. It’s useless in a production environment where you’re trying to handle turning hundreds of various fonts on and off multiple times a day, day after day. My opinion of course, but I see way to many users having issues trying to use Font Book.
If you do any update or reinstall of the system, just delete Font Book again. Whatever you do, don’t launch it, or it will create another database, which you wouldn’t want it to do. Having Font Book on any Mac is not required in any way. It’s just another font manger.
Jul 6, 2014 9:49 AM
There’s more to the conversation
Loading page content
Page content loaded
Suitcase Fusion is entirely unnecessary, Font Book will do everything necessary to manage fonts now. Especially in Mavericks where it can handle fonts no matter where they are, even on remote servers.
Possibly Suitcase is holding the fonts somewhere else than the Admin Library. Common cases are Adobe fonts which are in their own font folder, you’d have to go find those and add them to Font Book.
Jul 5, 2014 4:23 PM
The fonts I have installed as system fonts are not available in Pages.
Have you also looked for them in Format > Font > Show Fonts?
Jul 5, 2014 5:48 PM
Do you also have Font Book on your system? If so, remove it. Never have more than one font manager on your computer at a time. See the bottom of section 6 for full removal details of Font Book. Make sure to follow steps 2 and 3 as mentioned in the last line of that section. It’s very important to get Font Book’s database off the drive.
After you’ve cleared everything related to Font Book and restarted from Safe Mode, clear the current Suitcase database. You will lose any sets you’ve created when you do this. The method is pretty simple. Launch Suitcase and open its preferences. Click on the Type Core icon. Click New, and then Save. This will replace Suitcase’s current database with a new one. The only fonts which will be active after that will be only those in the System, Library, and current user account Fonts folders. All apps should then behave as expected.
I may receive some form of compensation, financial or otherwise, from my recommendation or link.
Jul 6, 2014 9:20 AM
Why would you remove Font Book and keep Suitcase Fusion?
I’d do it the other way round, especially as Font Book is a System app and likely to be reinstated with any upgrade or cause problems by its absence.
What benefit is there from using Suitcase Fusion?
Jul 6, 2014 9:29 AM
Because Font Bork is a piece of junk that constantly corrupts its own database, declares fonts as bad that have nothing wrong with them, and is all around a crappy font manager. See my font manager reviews in the article linked to above for more detailed info.
Not mentioned in the article (as I mention here about flagging fonts as bad). I tested Font Book in Mavericks as an example. I installed Mavericks on an erased partition. Everything is pristine clean. I moved all of the fonts in the /Library/Fonts/ folder to a new folder. I then added all of these fonts to Font Book. Mind you, I moved, not copied them, so the only thing different about these just installed fonts is their path on the hard drive. Font Book declared every one of them as damaged and marked them with a yellow caution sign.
Font Book is a light use font manager for the typical home user. It’s useless in a production environment where you’re trying to handle turning hundreds of various fonts on and off multiple times a day, day after day. My opinion of course, but I see way to many users having issues trying to use Font Book.
If you do any update or reinstall of the system, just delete Font Book again. Whatever you do, don’t launch it, or it will create another database, which you wouldn’t want it to do. Having Font Book on any Mac is not required in any way. It’s just another font manger.
Jul 6, 2014 9:49 AM
I have seen corrupted font caches but not what you have observed.
Font Book got quite an overhaul in Mavericks, allowing fonts to be stored in all sorts of places including off-site, so you can use clients fonts and leave them in their own collections.
However I bow to your greater and detailed experience. I’ll read your review in depth and try some tests of my own.
Jul 6, 2014 10:00 AM
Thanks for the info! I have looked it over and will definitely read it in depth and follow your advice. I appreciate your sharing your knowledge and experience. I am fairly new to Suitcase Fusion so I was reticent about doing anything with Font Book until I understood it better. I appreciate your assistance!
Jul 6, 2014 10:20 AM
I have seen corrupted font caches but not what you have observed.
It does depend greatly on the quality of the fonts you’re using. Many (read, most) free fonts are awful. Bad fonts corrupt Font Book’s database. The only fix then is to reset it. If you don’t remove the font(s) that damaged the database, as soon as you launch FB and it builds a new database, it immediately gets corrupted again. Keep doing this circle until the user wises up and gets their junk fonts out of the Fonts folders.
For production, Font Book just doesn’t handle a lot of fonts well, even if they’re clean. For testing purposes, I’ve had over 8,000 fonts open in Suitcase Fusion. The system, even with 16 GB of RAM, was predictably a bit slow, but it worked. Font Book tended to top out at about 2,500 before it would bomb using the same fonts I tested with in Suitcase. It is of course a silly way to use any computer (again, in my opinion), having that many fonts open, but designers in particular do it all the time. They want the fonts to just «be there» while they’re building an ad campaign.
With good fonts, Font Book can be pretty much every bit as effective as a third party manager. But even with good fonts, constant adding/removing of font sets almost always wrecks its database at some point. This is very rare with Suitcase Fusion or Linotype’s FontExplorerX Pro.
Font Book got quite an overhaul in Mavericks, allowing fonts to be stored in all sorts of places including off-site, so you can use clients fonts and leave them in their own collections.
It does indeed keep getting better. It just isn’t at the level of the two I just mentioned above. And Linotype’s offering hasn’t been around any longer than Font Book. Less, I think. But then, you’re talking about a company that knows a thing or two about fonts. 😉
Источник
Как использовать новый шрифт Apple San Francisco на веб-странице
Я хочу использовать новый шрифт San Francisco на сайте. Я пытался:
Но безрезультатно. Я пробовал ответы на этот вопрос., но @font-face здесь не решение.
11 ответов
Новый системный шрифт Apple не публикуется. Apple начала абстрагировать имена системных шрифтов:
Мотивация для этой абстракции состоит в том, чтобы операционная система могла лучше выбирать, какую грань использовать при заданном весе. Apple также работает над функциями шрифтов, такими как выбираемые глифы «6 ″ и« 9 ″ или немоноширинные числа. Полагаю, они тоже захотят перенести эти функции в Интернет.
Safari и Firefox используют SF для -apple-system ; Chrome распознает BlinkMacSystemFont :
Есть и другие варианты:
Вы можете продемонстрировать их на следующей скрипке; большинство из них еще не поддерживаются: http://jsfiddle.net/v94gw9nx/
Я получил информацию из статьи Крейга Хоккенберри, в которой есть много полезной информации об использовании шрифта: http://furbo.org/ 09.07.2015 / i-left-my-system-fonts-in-san-francisco /
Кроме того, в блоге Surfin ‘Safari есть отличная информация об использовании абстрактных системных шрифтов: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/
И, очевидно, Apple работает с W3C над стандартизацией использования общего «системного» имени шрифта в CSS. https://lists.w3.org/Archives/Public/www -style / 2015Jul / 0169.html
Загрузите файлы .otf шрифтов SF для личного использования: https://developer.apple.com/fonts/
В принципе, у меня сработало вот что:
P.S. Это работает во всех системах.
попробуйте это:
Семейство шрифтов: ‘SF Pro Text’, — apple-system, BlinkMacSystemFont, Roboto, ‘Segoe UI’, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’;
У меня это сработало. 😉 Проголосуйте, если это работает.
Последнее тестирование в 2015 г.
Следует использовать это решение в качестве последнего варианта, когда другие решения не работают.
Работайте в macOS Chrome / Safari
Вы не можете использовать системный шрифт Apple, обслуживаемый непосредственно из базы данных. Это противоречит лицензии, но вы можете использовать это для Mac систем выше, чем High Sierra.
Или вы можете использовать это:
Это обновление этого довольно старого вопроса. Я хотел использовать новые шрифты SF Pro на веб-сайте и не нашел CDN шрифтов, кроме отмеченного выше (applesocial.s3.amazonaws.com).
Ясно, что это не официальный репозиторий контента, одобренный Apple. На самом деле, я не нашел НИКАКОГО официального репозитория шрифтов, обслуживающего шрифты Apple, готового к использованию веб-разработчиками.
И на то есть причина — если вы читаете лицензионное соглашение, прилагаемое к загрузке нового SF Pro и других шрифтов с https: //developer.apple.com/fonts/ — в первых нескольких абзацах очень четко сказано:
[. ] вы можете использовать шрифт Apple Font исключительно для создания макетов пользовательских интерфейсов, которые будут использоваться в программных продуктах, работающих в операционных системах Apple iOS, macOS или tvOS, в зависимости от обстоятельств. Вышеупомянутое право включает право отображать шрифт Apple Font на снимках экрана, изображениях, макетах или других изображениях, в цифровом и / или печатном виде, таких программных продуктов, работающих исключительно на iOS, macOS или tvOS. [. ]
За исключением случаев, прямо предусмотренных в настоящем документе, вы не можете использовать шрифт Apple Font для создания, разработки, отображения или иного распространения любой документации, иллюстраций, содержимого веб-сайтов или любых других рабочих продуктов.
За исключением случаев, когда явно разрешено иное [. ] (i) только один пользователь может использовать шрифт Apple Font одновременно, и (ii) вы не можете делать Apple Font доступным по сети, где он может запускаться или использоваться на нескольких компьютерах. в то же время.
Ко мне больше нет вопросов. Apple явно не хочет, чтобы их шрифты распространялись в сети за пределами их продуктов.
Apple абстрагируется от системных шрифтов в будущем. Это средство использует новое родовое название семейства -apple-system. Таким образом, что-то вроде ниже должно дать вам то, что вы хотите.
Если пользователь использует El Capitan или выше, он будет работать в Chrome с
-apple-system позволяет выбрать Сан-Франциско в Safari. BlinkMacSystemFont — соответствующая альтернатива для Chrome.
Roboto или Helvetica Neue можно было вставить в качестве запасных вариантов даже до шрифта без засечек.
Последний раз тестировался: март 2018 г.
Чтобы ответить на вопрос
Как использовать новый шрифт Apple San Francisco на веб-странице
Или (даже короче):
Если вы хотите по умолчанию использовать системный шрифт на нескольких платформах, я бы посоветовал:
- -apple-system — Сан-Франциско в Safari (в Mac OS X и iOS); Neue Helvetica и Lucida Grande в старых версиях Mac OS X.
- system-ui — шрифт пользовательского интерфейса по умолчанию для данной платформы.
- BlinkMacSystemFont — эквивалент -apple-system для Chrome в Mac OS X.
- «Segoe UI» — Windows (Vista +) и Windows Phone.
- Roboto — Android (Ice Cream Sandwich (4.0) +) и Chrome OS.
- Ubuntu — все версии Ubuntu.
Идея позаимствована из следующего выпуска на github.
Вы можете найти шрифты для других ОС или их более старых версий в этой статье о css. трюки.
Ни один из текущих ответов, включая принятый , не будет использовать шрифт Apple San Francisco в системах, в которых он не установлен в качестве системного шрифта. Поскольку вопрос заключается не в том, «как использовать системный шрифт OS X на веб-странице», правильным решением является использование веб-шрифтов:
Источник
Шрифты в вебе, обзор от 2016 года
Предисловие
Вступление
В 2016 году нестандартными шрифтами никого не удивишь. 93% браузеров поддерживают их, и около 62% сайтов их используют. Кто-то просто пишет @font-face или вставляет
с Google Fonts, кто-то вставляет мегабайт шрифтов в base64 прямо в css. Возможностей много.
Загрузка
Статья была бы неполной без таблички разного поведения браузеров во время загрузки шрифтов, но я не могу себе позволить её вставить — она так часто встречается, что уже, вероятно, вызывает нервный тик.
FOIT — flash of invisible text. Сначала отрисовывается страница без текста, затем — сразу с нужным шрифтом.
FOUT — flash of unstyled text. Сначала используется один шрифт, затем — загруженный.
FOFT — некоторые выделяют такой подтип проблем, но встречается реже.
Очень хорошо описаны различные стратегии загрузки шрифтов в недавней статье от Zach Leatherman (русская версия), каждая со своими плюсами и минусами. Я же попробую дать упрощённый обзор различных вариантов: если понадобится изучить, набор ссылок будет под рукой.
@font-face без дополнительных ухищрений
Встречается часто, можно оставить всё как есть на откуп браузеру. Также плюс в том, что пользователи, скорее всего, уже привыкли к такому поведению и не замечают проблем. Минусы: разное поведение в разных браузерах, спорное поведение в некоторых случаях. В сафари и некоторых других браузерах в случае проблем загрузки шрифта может вообще ничего не отображаться длительное время..
- Не требует дополнительных усилий
- Скорее всего, пользователи привыкли к такому поведению и редко заостряют на этом внимание
Минусы:
- Разное поведение в разных браузерах
- Спорное поведение в некоторых случаях
Библиотека для определения загрузки шрифта
Общая идея: используем стандартный шрифт до загрузки, после загрузки переключаем класс на body и на всей странице включаются новые шрифты. Это похоже на стандартное поведение Internet Explorer и Edge.
- Контроль за использованием шрифтов
- Небольшой размер библиотек
- Просто использовать
Минусы:
- Переключение шрифта заметно пользователю
- Может приводить к перемещению элементов на странице из-за смены размера текста
- Требуются дополнительные ухищрения для отсутствия перерисовки шрифта при перезаходе: флаги в куках, sessionStorage
Ссылки:
Кодирование шрифта в base64
Самый разнообразный способ. Можно инлайнить шрифт прямо в основной файл стилей, грузить их асинхронно или вовсе складывать в localStorage. Для кого-то окажется неожиданным то, что после gzip размер отличается от бинарного файла совсем немного.
- В общем случае не нужны дополнительные библиотеки для определения загрузки шрифтов
- При использовании вместе с основной частью css делает ситуации с foit и fout гораздо реже
- При сохранении в localStorage всё кеширование шрифтов в наших руках
Минусы:
- Теряется поддержка нескольких типов шрифтов. Либо нужно их дублировать (и тем самым увеличивать общий размер), либо выбрать наиболее распространённый (например, woff и потерять экономию от woff2)
- Окончание загрузки css — не гарант того, что шрифт может быть сразу отображён! Как и вставка этого css напрямую в страницу. Браузерам требуется время на парсинг шрифтов перед их использованием. Всё это выливается в три стадии отрисовки: дефолтный шрифт, foit, нужный шрифт
- При вставке просто в css будет задерживать первую отрисовку всей страницы
Ссылки:
font-display
Новое css-свойство, которое позволяет контролировать отображение шрифтов во время загрузки. Плюсы-минусы очевидны: простота в использовании и слабая поддержка (скорее, никакая).
Это не совсем способ загрузки, а некоторая оптимизация. С помощью preload можно сократить время до окончания загрузки веб-шрифтов, попутно уменьшить вероятность foit. Браузеры на основе Blink начинают загружать шрифты только после того, как найдут текст на странице с соответствующим шрифтом, а это сильно откладывает окончательный показ страницы: нужно загрузить css, распарсить её, применить к дом-дереву и найти нужный элемент. preload указывает браузеру, что указанный ресурс стоит грузить прямо сейчас. Требуются атрибуты as, type и crossorigin.
Всё остальное
Есть ещё несколько вариаций всего перечисленного, а также вариант через JS (об этом ниже). Например, можно загрузить только одно начертание шрифта, а все остальные использовать при повторных заходах. Или сильно урезать набор используемых символов шрифта (до 5-10 кб) и положить всё это в base64. А может, на первом заходе вообще не использовать на первом заходе нестандартные шрифты, а только загружать их? Также можно не использовать шрифты, если текста почти нет: для логотипов вполне подойдёт SVG. Что выбрать? Каждый решает сам для себя, на основе дизайна, шрифта(-ов) и аудитории.
FontFace
Новое js-api позволяет загружать и использовать шрифты, не используя объявление @font-face вообще. Несколько примеров, чтобы было понятно, о чём речь:
Троеточие — не часть кода.
Проблема в том, что понять, какой формат поддерживается, напрямую нельзя. Поддержка браузерами тоже не полная, но к ней добавится Safari 10. FontFace может быть полезен при отрисовке текста через canvas, так как не придётся создавать невидимые элементы с текстом.
CSS-свойства
font-weight и font-style
font-weight — достаточно известное свойство. Часто можно увидеть bold, реже — что-то со значением в числах. Стоит отметить то, что веб всё чаще выбирается из bold/italic/bold-italic, сейчас можно увидеть всевозможные thin, light, medium (таких ключевых слов нет, но для них как раз используются числовые значения). Другой интересный вопрос — что делают браузеры, если нужного начертания нет в наличии? В случае жирного/курсивного начертания они пытаются сгенерировать глифы на основе обычной вариации шрифта.
unicode-range
Данное свойство позволяет указать список символов, которые должны быть отображены шрифтом. Это может быть полезно в качестве оптимизации — если на странице не будет символов из этого списка, шрифт не будет загружен вовсе. Также unicode-range можно использовать для стилизации отдельных символов, например, кавычек или для отображения символа рубля. Проблема может быть в поддержке этого свойства браузерами, и хотя она постепенно уходит, всё равно нужно думать: «а что, если бы unicode-range не было».
font-variant и font-feature-settings
font-variant — несколько обновлённый вариант font-feature-settings. Эти свойства позволяют задействиовать дополнительные возможности, включённые в шрифт. Например, кернинг, диагональные дроби, лигатуры и различные варианты иероглифов.
text-rendering
Свойство задумывалось как обобщённый регулятор скорости отрисовки шрифта, влияя одновременно на кернинг и лигатуры. Несмотря на свою мощность, свойство не получило значительного распространения и заслужило славу бажного и тормозного. В настоящее время имеет смысл воспользоваться font-variant и font-kerning, они дают больше контроля (если не так важна поддержка браузерами, а иначе — font-feature-settings). На самом деле, text-rendering является свойством SVG и не описано ни в одной спецификации CSS.
font-kerning
font-kerning контролирует работу кернинга (отступы между отдельными сочетаниями букв). Для включения требуется информация о кернинге внутри самого шрифта. Является более современной заменой части функционала font-feature-settings.
font-stretch
Редкоиспользуемое свойство с тяжёлой судьбой. Введённое в CSS 2 и поддержанное в Firefox 9 с Internet Explorer 9, оно было удално из CSS 2.1 и забыто до CSS 3, а не так давно было добавлено в Chrome 48. Оно позволяет использовать альтренативные начертания шрифта, более узкие или широкие.
Использование встроенных шрифтов
В OS X и iOS очень интересная ситуация с системными шрифтами. Недавно там были представлен San Francisco в качестве основного шрифта интерфейса системы. И если Helvitica Neue можно было указать прямо в font-family (хоть порой в сложном варианте), то с San Francisco такой способ был намеренно затруднён. По новой логике, чтобы разработчики не затачивались на какой-то конкретный шрифт, в таких случаях нужно использовать ключевые слова «-apple-system-*», которые поддерживаются с iOS 7. Как аналог, в десктопном хроме недавно добавили значение BlinkMacSystemFont.
В Android есть шрифт Roboto, который недоступен по своему имени. Однако можно использовать простые sans-serif, sans-serif-light, sans-serif-medium и другие.
Из-за лицензии, в общем случае нельзя просто взять и положить на свой сервер чьи-то системные шрифты. Допускается только указание их в css, так как тогда заботы о лицензии установленных в систему шрифтов ложатся на плечи пользователя.
Оптимизация
Самое простое — использовать оптимальный формат. Появившийся не так давно woff2 некоторые оценивают как лучший вариант для шрифтов, из-за примерно 30% уменьшения размера файла по сравнению с woff. Судя по caniuse — woff2 скоро будет поддерживаться в Edge и должен быть в новом Safari 10.
Другой способ — убрать неиспользуемую информацию из самого шрифта, например, лигатуры или наборы символов из неиспользуемых языков. Также есть возможность упростить сами векторные кривые символов — иногда в них слишком много точек и их можно задать проще.
Определение текущего шрифта элемента
Иногда стоит задача определения текущего шрифта элемента. В случае разработки могут помочь Chromium Developer Tools и недавно вернувшаяся панелька Fonts из Firefox. В ином случае остаётся только считать размер элемента и сравнивать его после смены значения font-family. Примерно этим занимаются FontFaceOnload и FontFaceObserver, если в браузере недоступен js-интерфейс FontFace. Почему браузеры не предоставляют для этого внятного апи? Дело в том, что отдельные символы внутри одного элемента могут быть отрисованы разными шрифтами, которые перечислен в font-family. На это может влиять упомянутый выше unicode-range и сам набор глифов шрифта.
Источник