将特定字形与网络字体一起使用

2024-05-18

使用网络字体,我想使用字体功能设置:CSS 中的选项以及跨度类HTML 中,以便使用字体集中的特定替代字形。

我需要以正确的语法使用哪些值(GID、Unicode?)才能定位特定的目标glyphglyph备择方案?


这些功能使用 OpenType Stylistic Alternates(盐)。从 Illustrator 中的字形面板中,我们可以看到这是 Stylistic Alt 编号 4(当然,如果没有额外的上下文,我们并不清楚这意味着什么)。

如果您使用 CSS,您可以为每个 Stylistic Alternate 添加一个类:

/* OpenType Stylistic Alternates */
.salt,
.salt-1 { font-feature-settings: "salt"; }
.salt-2 { font-feature-settings: "salt" 2; }
.salt-3 { font-feature-settings: "salt" 3; }
.salt-4 { font-feature-settings: "salt" 4; }

然后,在您的 HTML 中:

<h1>
  <span class="salt">C</span>offee
</h1>

并使用特定的数字:

<h1>
  <span class="salt-4">C</span>offee
</h1>

您也可能决定将 Stylistic Alt 应用于整个单词,但这可能会产生不同的结果,具体取决于字体:

<!-- Apply the OpenType feature to specific letters -->

<div>
  <span class="salt-1">C</span>offee
</div>

<div>
  <span class="salt-2">C</span>offee
</div>

<div>
  <span class="salt-3">C</span>offee
</div>

<div>
  <span class="salt-4">C</span>offee
</div>

<!-- Apply the OpenType feature to whole words -->

<div class="salt-1">
  Coffee
</div>

<div class="salt-2">
  Coffee
</div>

<div class="salt-3">
  Coffee
</div>

<div class="salt-4">
  Coffee
</div>

如果您想了解有关网络上 OpenType 功能的更多信息,您可以查看我的实用 OpenType CSS 库 https://github.com/kennethormandy/utility-opentype,以及“进一步阅读”的其他资源文档底部 http://utility-opentype.kennethormandy.com/.

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

将特定字形与网络字体一起使用 的相关文章

随机推荐

  • 增加在 Azure 上运行的 Dockerized ASP.NET Core 站点的最大上传大小限制?

    以下是应用程序的架构 使用 ASP NET Core 编写的 Web API Dockerfile 使用以下命令构建 Web 应用程序microsoft dotnet 2 1 sdk并使用执行 APImicrosoft dotnet asp
  • WPF TabControl,用C#代码更改TabItem的背景颜色

    嗨 我认为这是一个初学者的问题 我搜索了所有相关问题 但所有这些都由 xaml 回答 但是 我需要的是后台代码 我有一个 TabControl 我需要设置其项目的背景颜色 我需要在选择 取消选择和悬停时为项目设置不同的颜色 非常感谢你的帮助
  • 如何获取nodejs程序中的nodejs版本?

    In a Node js 的调试器 https github com rocky trepanjs 有一个命令显示V8版本和调试器包版本 如何获取nodejs版本 我想我基本上可以运行命令node version or nodejs ver
  • 如何在 Perl 中复制整个目录?

    我需要将整个目录复制到某个位置 最好的方法是什么 File Copy正如我所见 仅逐个文件复制 顺便说一句 我在Windows下工作 感谢帮助 也许调查一下文件 复制 递归 http metacpan org pod File Copy R
  • javascript 是否有等效的 __repr__ ?

    我最接近Python的东西repr这是 function User name password this name name this password password User prototype toString function r
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • IntelliJ 和 Maven - 找不到 mvn 命令

    我正在尝试构建一个使用 IntelliJ 创建的放置向导项目 当我跑步时 mvn package I get bash mvn command not found 我使用的是 Mac 并且正在遵循本教程 http www dropwizar
  • 警告消息 - 来自 dummies 包的 dummy

    我正在使用 dummies 包为分类变量生成虚拟变量 其中一些变量具有两个以上类别 testdf lt data frame A as factor c 1 2 2 3 3 1 B c A B A B C C C c D D E D D E
  • 呃!尝试将包发布到 npm 时出现 403

    我正在尝试将包发布到 npm 您可以在此处查看存储库 https github com biowaffeln mdx state https github com biowaffeln mdx state 我登录到 npmnpm login
  • Jupyter Notebook 找不到 Python 模块

    不知道发生了什么 但每当我使用 ipython 氢 原子 或 jupyter 笔记本时都找不到任何已安装的模块 我知道我安装了 pandas 但笔记本说找不到 我应该补充一点 当我正常运行脚本时 python script py 它确实导入
  • 如何使 QImage 或 QPixmap 半透明 - 或者为什么 setAlphaChannel 过时?

    4 7 并喜欢在 qgraphicsview 上叠加两个图像 顶部的图像应是半透明的 以便能够透过它看到 最初 两个图像都是完全不透明的 我期望存在一些为每个像素设置全局 alpha 值的函数 但似乎没有这样的函数 最接近的是 QPixma
  • Spring-Data-JPA 参数化 NativeQuery 参数错误?

    我在 spring boot v1 5 1 应用程序中有这个 JPA 实体 Entity Table name score public class Score implements Serializable Id GeneratedVal
  • 剪切评级栏中的图像

    我制作了自己的评级栏 花朵图像有 4 种尺寸 xdpi hdpi 等 从 24px24px 到 64x64px
  • Hibernate HQL:将对值作为 IN 子句中的参数传递

    我面临一个问题 如何使用 IN 子句将查询中的成对值的参数传递给 HQL 例如 select id name from ABC where id reg date in x y 并且参数是不同的数据类型string id 和reg date
  • Qt moc 在头文件中实现?

    是否可以告诉 Qt MOC 我想声明该类并在单个文件中实现它 而不是将它们拆分为 h 和 cpp 文件 如果要在 cpp 文件中声明并实现 QObject 子类 则必须手动包含 moc 文件 例如 文件main cpp struct Sub
  • 合并 url 中的 2 个输入值

    我有这样的形式
  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • pip 列出活动 virtualenv 中的全局包

    将 pip 从 1 4 x 升级到 1 5 后pip freeze输出我的全局安装 系统 软件包的列表 而不是我的 virtualenv 中安装的软件包的列表 我尝试再次降级到 1 4 但这并不能解决我的问题 这有点类似于这个问题 http
  • 如何删除标题中的粗体?

    我有一个标题 h1 THIS IS A HEADLINE h1 如何使短语 THIS IS 不加粗 其余部分不做任何更改 我在文本装饰中找不到任何相关标签 标题看起来很粗体 因为它大尺寸 如果您已应用粗体或想要更改行为 您可以执行以下操作
  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp