spot_img
HomeDivi主题使用教程如何在 WordPress 网站上使用可变字体

如何在 WordPress 网站上使用可变字体

说实话。 如果你在你的网站上使用单一的字体,重量、高度或间距没有变化,人们会感到无聊。 他们不会读你的东西。 这就是为什么你需要使用 可变字体 在您的网站上。 即使您选择只使用一种字体,您也可以通过 CSS 对其进行足够的调整,使其在功能上成为多种字体选择。

什么是可变字体?

可变字体是可以根据 5 个不同的标准或轴由 CSS 更改的单一字体。 每个轴控制字体外观的一个特定方面,并具有相应的 CSS 标签。

  • 重量 (怀特 在 CSS 中)
  • 倾斜 (斯内特 在 CSS 中)
  • 斜体 (意大利语 在 CSS 中)
  • 光学尺寸 (opsz 在 CSS 中)
  • 宽度 (怀特 在 CSS 中)

然后是伪轴等级,由 毕业证 在 CSS 中。 我希望我能告诉您为什么在您的样式表中使用 Grade 时要全部大写……但我不能。 就是这样。 此外,随着技术的发展,不同的公司可以(并且正在)引入新的轴。 所以我们将来可以用这些做很多事情。

当组合所有这些不同的轴时,您可以让任何一种字体大致做任何您想做的事情——甚至可以像 SVG 一样为它们制作动画。 (注意,这也包括像我们这样的图标字体。)

为什么使用可变字体?

简短的回答是他们是 远的 比在您的网站上嵌入和呈现多种字体更有效。 Google 的开发者文档很好地总结了这一点:

谷歌SEO优化服务

OpenType 可变字体允许我们将一个字体系列的多种变体存储到单个字体文件中。 Monotype 进行了一项实验,将 12 种输入字体组合起来生成八种权重,横跨三种宽度,横跨斜体和罗马字体。 在单个可变字体文件中存储 48 种单独的字体意味着 文件大小减少 88%. (强调他们的)

在 WordPress 中使用可变字体

所以既然我们知道可变字体非常棒,下一步就是将它们整合到我们的工作流程和 WordPress 网站中。

步骤1

您要做的第一件事是在您的网站上安装字体。 您可以使用像 Use Any Font 这样的插件,如果您是 ET 会员则直接通过 Divi 界面上传,使用@font-face 链接到它,或者完全放弃插件和主题并以老式方式进行。

如何在 WordPress 中使用可变字体

不管你怎么做,一旦你把它放在你的网站上,使用字体实际上是很容易的。 为此,我通过 Divi 上传了免费字体 Gingham,因为这是我使用的字体。 最终结果是一样的。

第2步

由于可变字体是基于 CSS 的,因此您将希望转到添加了自定义 CSS 的任何位置。 那可能是在 自定义.css 文件,一个 样式表.css在您的 WordPress 定制器中 额外的 CSS,甚至是 Divi 主题选项“常规”选项卡的底部(大多数主题也有类似的框)。 您将输入此代码(使用您正在使用的任何可变字体的名称)。

WordPress divi主题
@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

它在您的 CSS 窗口中看起来像这样。

如何在 WordPress 中使用可变字体

所有这一切都是为了让您可以在您的网站上使用该字体。

如何在 WordPress 中使用可变字体

步骤 3

现在是时候以某种方式设置它的样式了。 你可以用它做任何你想做的事,样式可以应用于任何类或 ID。 正如你所看到的,这个被应用到任何 .et_pb_text div。 你可以把它应用到整个 身体 或者 h1, h2, h3 甚至 p. 你的选择。 毕竟它们是可变字体。

有两种方法可以解决这个问题。 第一个是单一的、高效的 CSS 行,使用 字体变化设置。

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75; 
}

您也可以将它们与其他 CSS 一起添加,就像 漂浮 或者 z轴 或其他任何东西。

或者,您可以在单独的行上输入轴。

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100;  
}

他们最终都做同样的事情。

如何在 WordPress 中使用可变字体

H10的年终大促

图片来源:谷歌开发者指南

在哪里可以找到可变字体?

查找可变字体比仅仅使用 Google 字体要难一些(特别是因为没有一个 Google 字体是可变的)。 因为这项技术是新技术,所以可变字体并没有那么广泛。 由于轴之间的所有相互作用,它们必须单独制作,因此在提供它们的地方,它们通常是购买的高级字体。

    Adobe Typekit 提供了多种可变字体供您选择。 您可以通过 Creative Cloud 会员资格访问某些 TypeKit。

  • V-Fonts.com 是一个包含许多不同位置的目录,供您获取可变字体。 他们链接到他们所拉内容的不同来源。
  • Monotype 出售可变字体,甚至还有他们的免费演示 FF元 字体。

免费可变字体

也就是说,您可以获得一些免费的个人字体。 这些是品味高雅且才华横溢的肯尼·辛 (Kenny Sing) 推荐的。

  • 方格布式是我们上面使用的。 肯尼把我放在上面,这是一个很好的。
  • League Mono 也是一种简单但用途广泛的可变字体的不错选择。
  • Renner 的页面上说这是一部现代杰作。 我要和谁争辩?

现在你应该这样做。 因为可变字体就像装在一个盒子里的几十种字体,下载上面的那些,你可以访问更多的选项,我数不胜数。

记住

在您的 WordPress 网站上使用可变字体时,您唯一需要记住的是: 并非所有浏览器都支持它们 例如,Firefox 就存在一些问题。 因此,如果您计划使可变字体的可变部分成为您网站的宝贵部分,您可能需要为 Firefox 或 Microsoft Edge 用户制定应急计划。 但话又说回来,你可能已经有了其中之一,因为人们 仍然 运行 IE 6。

包起来

可变字体为表格带来了巨大的价值,而用户只需做很少的工作。 能够像添加粗体或斜体一样使用 CSS 属性设置它们的样式真是太棒了。 随着越来越多的浏览器开始识别为它们开发的各种轴,可变字体将是您至少想要尝试的东西——如果不是双臂拥抱的话。

您对可变字体有何看法?

文章特色图片来源 Tyler Finck / tylerfinck.com

5分钟生成10篇英文软文article forge软件试用
  跨境电商独立站代运营服务综合套餐 项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

高质量外链购买
guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES