# @bbc/psammead-styles 中文文档 规范地址：https://npmcn.com/package/%40bbc/psammead-styles/ 版本：8\.1\.1 npm 元数据更新时间：2025-03-06T15:54:14.688Z 中文译文更新时间：2026-11-07T18:47:40.639Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-styles 原文对照：https://npmcn.com/package/%40bbc/psammead-styles/?lang=original 项目主页：https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-styles/README.md 源码仓库：https://github.com/bbc/psammead/tree/latest/packages/utilities/psammead-styles ## 关键信息（来自 npm 元数据） - 包体积（解压后）：584 kB，40 个文件 - TypeScript 类型：未声明 - 运行依赖：0 个 - peer 依赖：react \>=16\.9\.0，@emotion/react ^11\.1\.4 - 首次发布：2018-11-26T16:40:50.270Z - 最新版本发布：2022-03-30T12:45:57.320Z - 近 30 天下载量：33765（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：89（近 12 个月 0 个） ## 中文简介 用于CSS的字符串常数集合,包含非GEL的造型细节,这些细节会与特定的BBC服务和产品通话. ## 安装 ```sh npm install @bbc/psammead-styles ``` 也可以使用：`pnpm add @bbc/psammead-styles`、`yarn add @bbc/psammead-styles`、`bun add @bbc/psammead-styles` ## README # 沙姆米德风格 - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Futilities%2Fpsammead-styles%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Futilities%2Fpsammead-styles%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/utilities/psammead-styles)](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-styles) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/utilities/psammead-styles)](https://david-dm.org/bbc/psammead?path=packages/utilities/psammead-styles&type=peer) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-styles.svg)](https://www.npmjs.com/package/@bbc/psammead-styles) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) 这个软件包提供了用于CSS的字符串常数的集合,包含非GEL的造型细节,这些细节会针对特定的BBC服务和产品 ## 出口 `/colours` - 多个 Psammead 组件或主题所需的工程定义颜色。 这些颜色不是由GEL定义的. `/detection` - 项目确定的CSS特性检测说明. `/fonts` - Reith字体的自定义浏览器行为。 这些主要理由不被认为是GEL定义(而不是GEL的一部分) [`@bbc/gel-foundations`](https://www.npmjs.com/package/@bbc/gel-foundations))是由于自定义的加权和加载定义所致. [关于本套件所定义的字体面的更详细情况,请在此查阅.](https://npmcn.com/package/%40bbc/psammead-styles/font-faces.md)15\. 还包括世界服务社所有字体的申报. `/font-styles` 提供了可用于获得不同服务的字体样式的函数。 如果字体样式不可用,则所有功能都将回落到服务的正则 sans字体样式. `/global-styles` 提供工程定义的全局样式 `styled-normalize` 和箱尺寸. ## 安装 ```jsx npm install @bbc/psammead-styles --save ``` ## 使用量 ```jsx import { C_POSTBOX } from '@bbc/psammead-styles/colours'; import { F_REITH_SANS_REGULAR, F_REITH_SANS_ITALIC } from '@bbc/psammead-styles/fonts'; ``` 通过导入此软件包定义的字体面定义的子集,您只能优先排列您项目最常用的字体, 浏览器样式会为不太常见的情景而介入 。 例如,在这些例子中,只为Reith Sans Prent和Italic导入自定义字体,任何粗体的造型都会被浏览器所"虚构". 您可能想要与 GEL 定义的字体堆栈定义一起使用这些字体面定义,这些定义可用于 [`@bbc/gel-foundations`](https://www.npmjs.com/package/@bbc/gel-foundations)数字 : ```jsx import { GEL_FF_REITH_SANS } from '@bbc/gel-foundations/typography'; ``` 然后这些值可以在代码中的CSS声明中直接使用. 注意字体面只应在一页上声明一次: ```jsx import { css } from 'styled-components'; // These should only be included on your page once. const someGlobalCSS = css` ${F_REITH_SANS_REGULAR}; ${F_REITH_SANS_ITALIC}; `; const SomeStyledComponent = css` background-color: ${C_POSTBOX}; font-family: ${GEL_FF_REITH_SANS}; `; ``` ### 字体样式 如果您正在使用嵌入式字体, 您需要先确保您已经装入了您的字体, 然后再使用这些函数 。 如果嵌入字体未加载,则将应用倒置字体 ```js import { getSansRegular } from '@bbc/psammead-styles/font-styles'; const fontStyle = getSansRegular('news'); const SomeStyledComponent = css` ${fontStyle}; /* more css styles */ `; ``` ### 检测 我们定义了自定义特性检测语句( 使用 CSS ) `@supports` 语法),为浏览器特定错误提供工作变通. - 网格: 我们曾经遇到过使用 `@supports (display:grid)` 从带有 Buggy CSS Grid 执行功能的浏览器中找到此检测 `@supports (grid-template-columns: fit-content(200px))` 更一致的检测. ```js import { grid } from '@bbc/psammead-styles/detection'; const someGridUsingComponent = css` @supports (${grid}) { display: grid; /* grid CSS */ } /* fallback CSS */ `; ``` ### 全局风格 我们导出一个使用 `styled-normalize` 并定义 css 规则 `box-sizing`。 。 。 . 此组件接受可选 `fonts` prop 是用于全局样式的字体样式阵列. ```js import GlobalStyles from '@bbc/psammead-styles/global-styles'; import { F_REITH_SANS_REGULAR, F_REITH_SERIF_MEDIUM, } from '@bbc/psammead-styles/fonts'; ``` ## 捐款 何时 **添加** 向此工具包新导出 [出口测试](https://github.com/bbc/psammead/blob/5d7395fd60bd8d73796d5a23775b4b5b36db1445/packages/utilities/psammead-styles/index.test.jsx#L11-L35) 还需要更新。 何时 **删除** 从此工具包中导出 [出口测试](https://github.com/bbc/psammead/blob/5d7395fd60bd8d73796d5a23775b4b5b36db1445/packages/utilities/psammead-styles/index.test.jsx#L11-L35) 软件包版本需要更新,需要作重大修改(EG:1.2.1 - > 2.0.0),因为这将被视为由于功能被去除而导致的突破性修改. Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: [psammead 仓库的根](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)。 。 。 . ### [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) 我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)请稍候再读一下. ### 许可证 萨姆米德 [Apache 2.0 许可](https://github.com/bbc/psammead/blob/latest/LICENSE)。 。 。 . ## 常见问题 ### @bbc/psammead-styles 是什么？ 用于CSS的字符串常数集合,包含非GEL的造型细节,这些细节会与特定的BBC服务和产品通话\. ### 如何安装 @bbc/psammead-styles？ 在项目目录运行 npm install @bbc/psammead-styles，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.9\.0）、@emotion/react（^11\.1\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bbc/psammead-styles 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bbc\_\_psammead-styles 是否存在。 ### @bbc/psammead-styles 可以商用吗？ @bbc/psammead-styles 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @bbc/psammead-styles 的下载量有多少？ 根据 npm 官方下载统计，@bbc/psammead-styles 在 2026/10/08 – 2026/11/06 这 30 天内被下载 33,765 次，日均约 1,126 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bbc/psammead-styles 还在维护吗？ 最新版本 8\.1\.1 发布于 2022/03/30（4 年前）；至今共发布 89 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/11/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。