如何在网页上使用 Apple 新的 San Francisco 字体

2024-05-07

我想在网站上使用新的 San Francisco 字体。我试过了:

font: 'San Francisco', Helvetica, Arial, san-serif;

无济于事。我已经尝试过以下问题的答案这个问题 https://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website?lq=1, but @font-face不是这里的解决方案。


苹果的新系统字体并未公开曝光。苹果已经开始抽象系统字体名称:

这种抽象的动机是让操作系统可以在给定权重下更好地选择使用哪个面。苹果还在研究字体功能,例如可选择的“6”和“9”字形或非等宽数字。我猜测他们也想将这些功能带到网络上。

Safari 和 Firefox 使用 SF-apple-system; Chrome 识别BlinkMacSystemFont:

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

还有其他变体:

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

您可以在以下小提琴中演示这些;大多数尚不支持:http://jsfiddle.net/v94gw9nx/ http://jsfiddle.net/v94gw9nx/

我从 Craig Hockenberry 的文章中获得了信息,其中有很多有关使用该字体的重要信息:http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

另外,Surfin' Safari 博客上还有一些关于使用抽象系统字体的重要信息:https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/ 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 https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

下载 SF 字体 .otf 文件供您个人使用:https://developer.apple.com/fonts/ https://developer.apple.com/fonts/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在网页上使用 Apple 新的 San Francisco 字体 的相关文章

  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • 滚动时将菜单栏固定在顶部[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我见过一些网站 当用户向下滚动页面时 会在右侧或左侧弹出一个框 另外 注意到这个模板 http www mvpthemes com m
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒
  • 使用内联样式有哪些风险?

    A 内容安全政策 https developer mozilla org en US docs Web HTTP CSP with a default src or style src指令将阻止内联样式应用于
  • Bootstrap 5 是否删除了行之间的间距?

    我开始使用 bootstrap 5 并注意到行之间没有空格 我们是否必须明确使用spacing https getbootstrap com docs 5 0 utilities spacing 实用程序喜欢mb 3 or mb 2等等试图
  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color
  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

随机推荐

  • 为什么recycleview数据无法与服务器端数据库数据同步

    我正在使用rest api向我在android中的应用程序提供数据 对于数据库 我正在使用phpmyadmin并在本地主机中执行此操作 一切顺利 但是当我在数据库中添加新数据时 我的recycleview无法与数据库中的最新数据同步 因此当
  • Android 上的 Skobbler 地图显示黑屏

    我正在使用 Skobbler SDK 2 3 0 针对 Lollipop 在 Nexus 5 和 Galaxy S4 上进行测试 在 Android Studio 1 0 2 上构建 我有一个带有导航抽屉和片段的 MainActivity
  • Zend url:获取参数始终保留在 url 中

    我在使用带有 get 参数的 Zend url 帮助器时遇到一些问题 在一个视图中 我有分页 它在 get 中发送额外的参数 所以在 url 中 所以没关系 但这是不行的 即使我更改页面 参数也始终保留在 url 中 事实上 zend ur
  • 将 xml 传递给 jquery 脚本时出现问题

    我正在尝试使用 jsp 中的 bufferedReader 从本地路径读取 xml 并尝试将 xml 传递给 jquery 脚本 如下所示
  • 使用 Antlr4 解析任意分隔符

    我尝试在 Antlr4 中创建一个接受正则表达式的语法由任意字符分隔 与 Perl 中的类似 我怎样才能实现这个目标 需要明确的是 我的问题不是正则表达式本身 实际上我不在 Antlr 中处理 而是在访问者中处理 而是分隔符 我可以轻松地为
  • 将列表沿元素拆分为子列表

    我有这个清单 List
  • 内存数据库不保存数据

    我有一个简单的网络应用程序 在客户端有 Angular 在服务器端有 ASP NET Core Web API 我使用内存数据库 services AddDbContext
  • 在ironpython中使用ipython需要什么?

    我很想使用 IronPython 来探索 net 运行时和库 但我怀念来自 CPython 的经历IPython http ipython scipy org moin 的补全和快捷键 上次我检查过 IPython 由于缺少 sys get
  • ML.NET 无法在 uwp 上运行

    我在 Visual Studio 2017 中构建了一个 UWP 应用程序 并在解决方案中添加了一个类库来运行 ML NET 但每次运行该应用程序时都会出现异常 PlatformNotSupportedException 此平台不支持检索有
  • 反规范化 XSD

    我需要对 XML 模式进行非规范化 以便为将创建符合该模式的文档的人员生成文档 用户不了解 XSD 并且很可能永远不会学习 我见过的工具能够为其他 XSD 开发人员生成文档 但我的用户对如何构建架构的细节不感兴趣 他们只想知道他们可以做什么
  • 更改称为通知的 applescript 的图标

    有了 OSX Mavericks 我们现在可以带有 applescript 的通知 http www macosautomation com mavericks notifications index html很容易 然而 似乎没有一种方法
  • 如何将测试文件夹添加到旧的 Android Studio 项目

    我在将用于测试的项目结构添加到 Android Studio 中的旧 Android 项目中时遇到一些问题 当您在 Android Studio 中创建新项目时 您将获得从一开始就创建的用于测试的目录 src test java for u
  • 最后一项具有不同类型的元组(首先从剩余元素开始)

    我有一个类型Foo那是一个Array可以包含任意数量的Bar元素 带有可选的最后一个Qux元素 以下是一些有效数据的示例 bar qux bar qux bar bar bar bar bar bar bar bar qux 无效数据示例
  • 如何绘制多面直方图(不是条形图)以及相对于每个面的百分比?

    虽然有几篇关于如何在条形图的每个方面使用缩放百分比的帖子 但我没有看到任何帖子显示如何在直方图中执行此操作 可以这样做吗 这是我研究过的两篇文章 所以帖子1 使用 ggplot2 获取反映各个方面的百分比比例 https stackover
  • 如何在 R 组内的两个变量的组合上选择具有特定值的行

    这是我之前提出的 R 问题的扩展 如何在R中选择组内具有特定值的行 https stackoverflow com questions 55853841 how to select rows with certain values with
  • 如何在Java中从一组选定的颜色中输出随机颜色? (安卓)

    因此 我希望每当用户输入答案时都为字符串赋予随机颜色 我的问题是 我不确定如何使字符串的随机颜色成为特定范围的颜色 例如 如果我希望字符串随机变成蓝色 红色 绿色 粉色 白色或棕色 只有这些颜色 没有其他颜色 到目前为止 我已经使用以下代码
  • Python:如何将包含对象的列表保存在文件中?

    我尝试创建不同的对象 使用类和对象 并将它们保存在文件中以便稍后编辑或检索它们 然而这就是它的样子 GlobalCategories GlobalContent def LoadData x y import pickle with ope
  • 为什么自动关闭脚本元素不起作用?

    浏览器无法正确识别的原因是什么 只有这一点是公认的 这是否打破了 XHTML 支持的概念 注意 此声明至少对于所有 IE 6 8 beta 2 都是正确的 XHTML 1 规范的非规范性附录 HTML 兼容性指南 指出 3 元素最小化和空元
  • 应用程序和插件修订,使 Origen 应用程序生产做好准备

    我们的开发应用程序有大约 12 个自制插件和许多 Origen gems 需要从开发转向生产级质量 我看到许多不同的主题开始here http origen sdk org origen guides misc revisioncontro
  • 如何在网页上使用 Apple 新的 San Francisco 字体

    我想在网站上使用新的 San Francisco 字体 我试过了 font San Francisco Helvetica Arial san serif 无济于事 我已经尝试过以下问题的答案这个问题 https stackoverflow