沙特里亚尔字体
一个社区维护沙特里亚尔货币符号的开源字体.
这个软件包提供了web ,mobile 和桌面 已准备好的字体来显示沙特里雅尔货币符号. 它使得货币符号甚至在您的平台或操作系统支持其本土化之前就可以使用. 两者兼有的字体船 常设经常 财务报告和审定财务报表 粗体 重量和支持两个不同的代码点:
- 铀+20C1 – 即将到来的沙特里雅尔标志被计划以Unicode 17编码. 这是该符号的官方拟议代码点并被推荐用于新项目.
- 铀+E900 - 一个私人密码点 这个字体的旧版本使用U+E900作为占位符,直到Unicode在货币符号块中指定了代码点. 对于后向兼容,您可以继续使用;但是,如果可能,您应该迁移到 铀+20C1。 。 。 .
软件包信息
* * * 存储器
兼容性
项目状况
现场直播
🎉 看这里的现场演示:
🔗 沙特里亚尔字体Demo
以下是示例演示页的截图:
* 特性
👉 交叉式相容性 – 在Windows,macOS,Linux,Web,和Mobile上工作.
👉 双码点 - 支持未来的Unicode代码点 U+20C1 和一个遗留下来的私人区域代码点 U+E900。 。 。 .
👉 常规粗体重( B) – 有真实的正字形和粗体字体的船舶,用于一致的打字.
👉 网络化 - 包括 .woff, (中文(简体) ), .woff2 财务报告和审定财务报表 .ttf 用于快速加载的格式.
👉 国家预防机制支助 - 通过国家防范机制为网络项目轻松安装.
👉 CDN 托管 - 不安装即通过 日记 或者说 (单位:公斤)。 。 。 .
👉 打开源码自由( F) - 释放 SIL 开放字体许可证( OFL)。 。 。 .
👉 可自定义 - 视需要修改和加强.
安装和使用
1️⃣ 通过国家预防机制安装(建议网络开发者使用)
安装软件包 :
npm install @emran-alhaddad/saudi-riyal-font
然后导入您工程中捆绑的样式表 :
import "@emran-alhaddad/saudi-riyal-font/index.css";
使用 HTML 中的符号,方法是增加一个提供的图标类。 套接字定义了遗留下来的私用代码点和新的Unicode代码点的类:
<!-- Private‑use code point (U+E900) -->
<span class="icon-saudi_riyal"></span> 100
<span class="icon-saudi_riyal_bold"></span> 100
<!-- New Unicode code point (U+20C1) -->
<span class="icon-saudi_riyal_new"></span> 100
<span class="icon-saudi_riyal_bold_new"></span> 100
每个类都使用相适应的字体重量和代码点. 您可以通过标准的 CSS 调整大小和颜色( 例如) font-size 或者说 color) (中文(简体) ).
通过 CDN (不需要安装) 使用网络
如果您不愿安装软件包, 您可以直接从 CDN 装入 CSS :
* 使用 jsDelivr CDN
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@emran-alhaddad/saudi-riyal-font/index.css" />
使用 unpkg CDN
<link
rel="stylesheet"
href="https://unpkg.com/@emran-alhaddad/saudi-riyal-font/index.css" />
然后可以使用上述相同的图标类.
3️⃣ 手动集成自定义 CSS
如果您正在手动嵌入字体( 例如在自定义工程中或在编译自己的 CSS 时), 请使用 @font-face 并选择您想要显示的代码点。 文件夹结构在 1.1.0版 翻译: 正常和粗体重量,现在生活在 fonts/regular 财务报告和审定财务报表 fonts/bold。 。 。 .
以下是如何为两个代码点加载重量并定义图标类的例子:
@font-face {
font-family: "saudi_riyal";
src: url("fonts/regular/saudi_riyal.woff2") format("woff2"),
url("fonts/regular/saudi_riyal.woff") format("woff"),
url("fonts/regular/saudi_riyal.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "saudi_riyal_bold";
src: url("fonts/bold/saudi_riyal.woff2") format("woff2"),
url("fonts/bold/saudi_riyal.woff") format("woff"),
url("fonts/bold/saudi_riyal.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
/* Legacy private‑use code point (U+E900) */
.icon-saudi_riyal::before {
content: "\e900";
font-family: "saudi_riyal" !important;
font-size: inherit;
color: inherit;
}
.icon-saudi_riyal_bold::before {
content: "\e900";
font-family: "saudi_riyal_bold" !important;
font-size: inherit;
color: inherit;
}
/* New Unicode currency sign (U+20C1). Use this when your platform or font stack supports Unicode 17 or when you wish to future‑proof your site. */
.icon-saudi_riyal_new::after {
content: "\20c1";
font-family: "saudi_riyal" !important;
font-size: inherit;
color: inherit;
}
.icon-saudi_riyal_bold_new::after {
content: "\20c1";
font-family: "saudi_riyal_bold" !important;
font-size: inherit;
color: inherit;
}
在将此 CSS 添加到您的项目后, 在内置元素上使用相应的类( 例如 ) , <span> 或者说 <i>) (中文(简体) ). 例如:
Price: <span class="icon-saudi_riyal_new"></span> 50.00
说明: 如果符号在您的具体设计中显示的比周边文字略高,您可以用CSS来调整其垂直位置. 例如,将符号包入容器并使用
vertical-align: -0.1em放在容器上把它推倒.
* 反应原生/展览使用
此软件包的 JavaScript 入口使用浏览器 URL API 查找字体资产 。 当在 React Natural 下运行时,使用Hermes 引擎(例如, Expo SDK 53) URL API没有执行. 这造成了如下错误:
ERROR [runtime not ready]: Error: URL.protocol is not implemented, js engine: hermes
ERROR [runtime not ready]: Invariant Violation: "main" has not been registered.
要在本地或博览会中使用沙特里雅尔字体:
-
安装 URL 多填充( 建议) - 安装
react-native-url-polyfill并在其他代码之前导入。 这种多填充URL.protocol和相关方法,使Hermes能够运行依赖于URLAPI (英语).npm install react-native-url-polyfill// In your entry file (e.g. index.js or App.tsx) import "react-native-url-polyfill/auto"; // ...rest of your imports -
直接装入字体文件 - 或者,跳过此软件包的 JavaScript 切入点并装入
.ttf文件直接与expo-font数字 :import { useFonts } from "expo-font"; // Adjust the path to the TTF files as needed const [loaded] = useFonts({ SaudiRiyal: require("./node_modules/@emran-alhaddad/saudi-riyal-font/fonts/regular/saudi_riyal.ttf"), SaudiRiyalBold: require("./node_modules/@emran-alhaddad/saudi-riyal-font/fonts/bold/saudi_riyal.ttf"), });一旦字体被装入,请在样式中按名称应用. 对符号和周围的文字使用不同的字体家族来避免数字与符号结合后消失.
欲了解更多详情或跟踪React Independence支持的进展情况,请参见 问题19。 。 。 .
4️⃣ 在Windows, Mac, Linux, Android & iOS 上下载并安装
如果您需要桌面或移动应用程序的字体, 您可以下载 .ttf 文档并手动安装。 这些文件生活在 fonts/regular 财务报告和审定财务报表 fonts/bold 此仓库中的目录 。 详细指示载于 困难指南 每个平台.
QQ 解决问题和问题
如果遇到错误的符号等问题,请访问InfoFinland上的 <select> 元素、电子邮件模板、wkhtmltopdf、移动应用程序或覆盖字体的框架,请查阅 解决问题指南它从该项目的GitHub问题中收集已知的问题,并提供实际的变通办法.
* 发展和贡献
欢迎 捐款贡献:
- 叉头 此仓库 .
- 做你的改变 (改进字体,更新示例,加入glyphs).
- 提交拉动请求 供审查.
如果你发现问题,请通过 问题 节。 在提交问题时,请描述环境、框架,并酌情提供代码片段。 这有助于我们迅速复制和解决问题.
许可证
此字体在 SIL 开放字体许可证( OFL)需要归属.
Saudi Riyal Font © Emran Alhaddad – Used under SIL Open Font License 1.1
联系人
关于问题、反馈或合作,请通过 GitHub 问题 或电子邮件在 埃姆兰[email protected]。 。 。 .
🚀 享受沙特里雅尔字体吧!