将 Nure 可变字体与 PragmataPro 结合,作为浏览器的默认字体使用,可以提高您的工作效率。 下载 Nure 可变网页字体后,将其放入您的用户文件夹,安装适用于大多数主流浏览器的免费插件 Custom Style Script,然后将以下代码放入 Options page(选项页面) 中。 @font-face { font-family: 'Nure'; src: url('/Users/(您的用户文件夹)/Nure11-VF.woff2') format('woff2-variations'), url('/Users/(您的用户文件夹)/Nure11-VF.woff2') format('woff2');} body, .css-901oao, ._292iotee39Lmt0MkQZ2hPV, a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, caption, cite, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, main, map, mark, menu, meter, nav, object, ol, optgroup, option, output, p, param, progress, q, rp, rt, ruby, s, samp, section, select, small, source, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, track, u, ul, var, video, wbr {font-family: 'Nure'; font-weight: 300; font-variation-settings: 'opsz' 18, 'wdth' 80;} 其中 font-weight 是第一个轴 “字重”,其取值范围为 100 到 900。font-variation-settings: 'opsz' 是第二个轴 “光学尺寸”,其取值范围为 12 到 72。font-variation-settings: 'wdth' 是第三个轴 “宽度”,根据 Windows 标准,其取值范围为 75 到 125。 改变这些数值,您可以找到最适合自己的配置。 以 Hacker News 作为测试网站的视觉示例: 实际视图。Custom Style Script 插件关闭 Custom Style Script 开启,设置如下:{font-family: ‘Nure’; font-weight: 300; font-variation-settings: ‘opsz’ 20, ‘wdth’ 90;} Custom Style Script 开启,设置如下:{font-family: ‘Nure’; font-weight: 300; font-variation-settings: ‘opsz’ 30, ‘wdth’ 110;} Custom Style Script 开启,设置如下:{font-family: ‘Nure’; font-weight: 300; font-variation-settings: ‘opsz’ 18, ‘wdth’ 80;} Custom Style Script 开启,设置如下:{font-family: ‘Nure’; font-weight: 240; font-variation-settings: ‘opsz’ 18, ‘wdth’ 80;} 在 Mozilla Firefox 中结合使用 Nure 与 PragmataPro 这只是将像 Nure 这样的可变字体用作默认字体潜力的一次快速展示。 This post is also available in EN.
如何在浏览器中设置 Nure 可变字体
将 Nure 可变字体与 PragmataPro 结合,作为浏览器的默认字体使用,可以提高您的工作效率。
下载 Nure 可变网页字体后,将其放入您的用户文件夹,
安装适用于大多数主流浏览器的免费插件 Custom Style Script,然后将以下代码放入
Options page(选项页面)中。@font-face { font-family: 'Nure'; src: url('/Users/(您的用户文件夹)/Nure11-VF.woff2') format('woff2-variations'), url('/Users/(您的用户文件夹)/Nure11-VF.woff2') format('woff2');} body, .css-901oao, ._292iotee39Lmt0MkQZ2hPV, a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, caption, cite, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, main, map, mark, menu, meter, nav, object, ol, optgroup, option, output, p, param, progress, q, rp, rt, ruby, s, samp, section, select, small, source, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, track, u, ul, var, video, wbr {font-family: 'Nure'; font-weight: 300; font-variation-settings: 'opsz' 18, 'wdth' 80;}其中
font-weight是第一个轴 “字重”,其取值范围为 100 到 900。font-variation-settings: 'opsz'是第二个轴 “光学尺寸”,其取值范围为 12 到 72。font-variation-settings: 'wdth'是第三个轴 “宽度”,根据 Windows 标准,其取值范围为 75 到 125。改变这些数值,您可以找到最适合自己的配置。
以 Hacker News 作为测试网站的视觉示例:
{font-family: ‘Nure’; font-weight: 300; font-variation-settings: ‘opsz’ 20, ‘wdth’ 90;}
{font-family: ‘Nure’; font-weight: 300; font-variation-settings: ‘opsz’ 30, ‘wdth’ 110;}
{font-family: ‘Nure’; font-weight: 300; font-variation-settings: ‘opsz’ 18, ‘wdth’ 80;}
{font-family: ‘Nure’; font-weight: 240; font-variation-settings: ‘opsz’ 18, ‘wdth’ 80;}
这只是将像 Nure 这样的可变字体用作默认字体潜力的一次快速展示。
This post is also available in EN.
Related Posts
PragmataPro 0.828:符文、图文电视图形和所有 HTML5 实体!
— 本版本包含全部 2109 个 HTML5 实体 从现在起,使用 Pragmata Pro,您的网页可以毫无 …
新作品:Everseen 自定义字体
This post is also available in EN.
Nure 可变字体 1.3 现已发布
This post is also available in EN.
PragmatPro 0.825 – 更多优点!
得益于收到的众多建议,PragmataPro 现在成为了一款更加完整的专业字体: — 新增 Dm …