# @emran-alhaddad/saudi-riyal-font 中文文档
规范地址：https://npmcn.com/package/%40emran-alhaddad/saudi-riyal-font/
版本：1\.1\.0
npm 元数据更新时间：2025-09-08T11:39:53.679Z
中文译文更新时间：2026-11-13T15:55:54.547Z
软件包许可：OFL-1\.1
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40emran-alhaddad/saudi-riyal-font
原文对照：https://npmcn.com/package/%40emran-alhaddad/saudi-riyal-font/?lang=original
项目主页：https://github.com/emran-alhaddad/Saudi-Riyal-Font#readme
源码仓库：https://github.com/emran-alhaddad/Saudi-Riyal-Font
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：3.7 MB，27 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2025-02-25T14:50:22.189Z
- 最新版本发布：2025-09-08T11:39:53.508Z
- 近 30 天下载量：23777（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）
## 中文简介
沙特里雅尔货币符号的官方开源字体.
## 安装
```sh
npm install @emran-alhaddad/saudi-riyal-font
```
也可以使用：`pnpm add @emran-alhaddad/saudi-riyal-font`、`yarn add @emran-alhaddad/saudi-riyal-font`、`bun add @emran-alhaddad/saudi-riyal-font`
## README
# 沙特里亚尔字体
**一个社区维护沙特里亚尔货币符号的开源字体.**
这个软件包提供了web ,mobile 和桌面 已准备好的字体来显示沙特里雅尔货币符号. 它使得货币符号甚至在您的平台或操作系统支持其本土化之前就可以使用. 两者兼有的字体船 **常设经常** 财务报告和审定财务报表 **粗体** 重量和支持两个不同的代码点:
- **铀+20C1** – 即将到来的沙特里雅尔标志被计划以Unicode 17编码. 这是该符号的官方拟议代码点并被推荐用于新项目.
- **铀+E900** - 一个私人密码点 这个字体的旧版本使用U+E900作为占位符,直到Unicode在货币符号块中指定了代码点. 对于后向兼容,您可以继续使用;但是,如果可能,您应该迁移到 **铀+20C1**。 。 。 .
* * *
## 软件包信息
[](https://www.npmjs.com/package/@emran-alhaddad/saudi-riyal-font) [](https://www.npmjs.com/package/@emran-alhaddad/saudi-riyal-font) [](https://www.jsdelivr.com/package/npm/@emran-alhaddad/saudi-riyal-font) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font) [](https://emran-alhaddad.github.io/Saudi-Riyal-Font/examples/demo.html)
## \* \* \* 存储器
[](https://github.com/emran-alhaddad/Saudi-Riyal-Font/stargazers) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/network/members) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/issues) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/graphs/contributors) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/releases) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/commits)
## 兼容性
[](https://emran-alhaddad.github.io/Saudi-Riyal-Font/examples/demo.html) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font) [](https://www.typescriptlang.org/)
## 项目状况
[](https://github.com/emran-alhaddad/Saudi-Riyal-Font/blob/main/LICENSE.txt) [](https://emran-alhaddad.github.io/Saudi-Riyal-Font/examples/demo.html) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/graphs/commit-activity) [](https://github.com/emran-alhaddad/Saudi-Riyal-Font/pulls) [](https://opensource.org/)
## 现场直播
🎉 **看这里的现场演示:**
🔗 [沙特里亚尔字体Demo](https://emran-alhaddad.github.io/Saudi-Riyal-Font/examples/demo.html)
以下是示例演示页的截图:
* * *
## \* 特性
👉 **交叉式相容性** – 在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
```
然后导入您工程中捆绑的样式表 :
```js
import "@emran-alhaddad/saudi-riyal-font/index.css";
```
使用 HTML 中的符号,方法是增加一个提供的图标类。 套接字定义了遗留下来的私用代码点和新的Unicode代码点的类:
```html
100
100
100
100
```
每个类都使用相适应的字体重量和代码点. 您可以通过标准的 CSS 调整大小和颜色( 例如) `font-size` 或者说 `color`) (中文(简体) ).
* * *
### 通过 CDN (不需要安装) 使用网络
如果您不愿安装软件包, 您可以直接从 CDN 装入 CSS :
#### \* 使用 jsDelivr CDN
```html
```
#### 使用 unpkg CDN
```html
```
然后可以使用上述相同的图标类.
* * *
### 3️⃣ 手动集成自定义 CSS
如果您正在手动嵌入字体( 例如在自定义工程中或在编译自己的 CSS 时), 请使用 `@font-face` 并选择您想要显示的代码点。 文件夹结构在 **1.1.0版 翻译**: 正常和粗体重量,现在生活在 `fonts/regular` 财务报告和审定财务报表 `fonts/bold`。 。 。 .
以下是如何为两个代码点加载重量并定义图标类的例子:
```css
@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 添加到您的项目后, 在内置元素上使用相应的类( 例如 ) , `` 或者说 ``) (中文(简体) ). 例如:
```html
Price: 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.
```
要在本地或博览会中使用沙特里雅尔字体:
1. **安装 URL 多填充( 建议)** - 安装 [`react-native-url-polyfill`](https://github.com/zmotree/react-native-url-polyfill) 并在其他代码之前导入。 这种多填充 `URL.protocol` 和相关方法,使Hermes能够运行依赖于 `URL` API (英语).
```
npm install react-native-url-polyfill
```
```js
// In your entry file (e.g. index.js or App.tsx)
import "react-native-url-polyfill/auto";
// ...rest of your imports
```
2. **直接装入字体文件** - 或者,跳过此软件包的 JavaScript 切入点并装入 `.ttf` 文件直接与 `expo-font`数字 :
```js
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](https://github.com/emran-alhaddad/Saudi-Riyal-Font/issues/19)。 。 。 .
* * *
### 4️⃣ 在Windows, Mac, Linux, Android & iOS 上下载并安装
如果您需要桌面或移动应用程序的字体, 您可以下载 `.ttf` 文档并手动安装。 这些文件生活在 `fonts/regular` 财务报告和审定财务报表 `fonts/bold` 此仓库中的目录 。 详细指示载于 [困难指南](https://npmcn.com/package/%40emran-alhaddad/saudi-riyal-font/TROUBLESHOOTING.md) 每个平台.
* * *
## QQ 解决问题和问题
如果遇到错误的符号等问题,请访问InfoFinland上的 `