!
也想出现在这里? 联系我们
广告位

WordPress 主题修改全局字体详细教程

今天我们分享下比较实用的 WordPress 主题修改全局字体详细教程,有时候 WordPress 的字体不能让我们满意,这个时候我们就可以通过一些方法来修W y 8 I F l 5改主题的默认字体,来达到我们想要的效果。下面介绍的更换字体主要分为两种,第一种是直接调用系统的字体,来替换原来主题的默认字体;第二种则是使用p : Z [ *自己的字体文件,来实现字体的替换。

第一种:

这种方法通过修改 CSS 文件就可以实现,有些主题自带( d & B & T了自定义 CSS 样式的\ 5 d设置,Wordpress 也提供了这一入口(后台管理 -&gP Z it; 外观 -> 自定义 CSS),这时候我们就可以直接在里面填上:

  1. *:not( e B _ w1;clF Z % u = -ass*="_ q i |icon"]):not(i&6 z 6 | D | B h#041; {
  2. font-family: Segoe UI, &qD 4 `uot;Microsoft Yahei" !important;
  3. }

上面的例子就是将字体全局优先替换成 Segio UI,其次替换成微软雅黑,下面列举几个比较适合阅读的字体~ } ~ | 3,供大家替换,替换代码中的 Segio UI 和 MicrosoS u O 5ft YaHei 即可。C F r N f _

第二种:

既然是私有字体,那就一定无法D 8 W d j o从公共库中直接选择,必定要上传到某7 / { F [ b个服务端来进行E : _ X z r加载。这里可以选择:1. 上传至网站服务器 2.7 L 3 9 上传至 Github(推荐)3. 上传至私有云存储进行调用在这之前需要先做一/ G T 4 \ _ e项准备工作,我们手上的字体文件i n O ` i i b T通常只有一种格式,而为了满足不同浏览器的需要,我们需要g A \ m g将其扩展为五种格式,分别为.ttf .eot .woff .woff2 .svg。百度搜索就可以找到在线转换的工具,例如这个:在线字体转换
1、这种方法面临这一种风险,中文字体库体积通常很大,比如我现在正在使用的思源黑体,一个 ttf 文e # G : j 1 x T W件就有 8M 多,再a v p a加上国内服务器的小带宽,肯定导致网站加载时间大大加长。

将你前面准备好的五种字体格F a F T 5 N 2 ^ 9式全z & # `部上传到网站的一个文件夹内,比如我放在 /fonts 文件夹内,且统一命名,比如 siyuan.ttf,siyuan.svg 等等。在自定义 CSS 样式中输入下列代码:

  1. @font-face {
  2. font-family: '随便一个名称,需要和下面的保持对应';
  3. src: url('../fonts/yourfo9 Q ( \nt.eot');
  4. src:
  5. url('../fonts/yourfont.eot') fow i srmat('embedded-opentype'),
  6. url` s 8 V X Q %('../font[ 1 E S X A #s/yourfont.woff2') format('woff2'),
  7. url('x T e y a z p b../fonts/yourfont.wof1 | i L 2 7 af') format('woff'),
  8. urlB Y 2 S A040;d K 5 ] W { p O T'y S ~ @ 8 i../fonts/yourfG U R ? % O M pont.ttf') format('truetype'),
  9. url('../fonts/yourfont.V N !svg') format('svg'O n D 7 f O P #041;;
  10. font-weight:[ & 0 ? Y 2 normal;
  11. font-style: normaG : B w o 0 Q r #l;
  12. }
  13. *:not([class*="icon"]):not(i) {
  14. font-family: "与上面起的K d M 5 @ 2名字的对应&qu: h s g oot; !important;
  15. S / V | q5;

个人不是很推荐这种方法,建议还是使用下面的云存储托管。

2. 上传至 Github 使用免费的 jsDelivr CDN 加速,jsDelivr 如何如何好用这边就不多说了,Github 怎么使用这边也不多说了,大体方法就是将你的字体文件上传至 Github 自己] ~ # D ; 5 G q的仓库中,然后使用 jsDelivr 提供的加速服务来调用,方便好用还不要钱。

jsDelivK 0 u R 5 ; ; O Nr 调Q f d ^ W l 2 : l用格式 https://cdn.jsdelivr.net/gh/Github 用户名 / 仓库名 / 具体路径 svg 文件大多会超过 20M,评论区小伙伴提醒 jsDelivr 调用文件A \ 7 y @超过 20M 会报错,可W ; - { .以使用其他方式加载 svg,不过留在上面也没什么问题,因为正常是不会使用到的。附上几个字体的调用链接H . a G F X t(托h Y & _ Y V l C管于 Github,使用 jH u 2sDelivr 加速服务):
AdobeCleanHanSC

  1. @font-face {
  2. font-family: 'AdobeCleanHanSC';
  3. src: url(c j 4 2'https://cdn.jsdel] @ @ C r W _ 9ivr.net/gh/Ratodo/Lib/fo5 f \ y Qnts/AdobeCleanHanSC/AdobeCleanHanSC.eot');
  4. src:
  5. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot') foN 9 o g w n / 2rmat('embedded-opentype'),
  6. url1 G L A }('https://cdn.jsdelivr.net/gh/Ratodo/Lib/? w u ^ x w * zfon@ n qts/AdobeCleanH~ N ` \ { SanSC/AdobeCleanHanSC.woff2') format('woff2'),
  7. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/Ado3 0 r d @ i { } &beCleanHanSC.woff') format('woff'),
  8. url('5 V p ? b %https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/A! l = ` 3 z G 3 (dobeClel : f Z \ vanHanSC/AdobeCleanHanSC.ttf') format('tr) F y U % :uetype'),
  9. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg') format('svg');
  10. fonO B | ~ 9 1 e tt-weight: 400;
  11. font-style: normal;
  12. font-display: swh o z Xap;
  13. }
  14. *:not([class*="icon"]):not@ a F - ( k0;i) {
  15. font-famid * cly:B 7 B G "AdobeCleanHanSC" !important;
  16. }

思源黑体

  1. @font-face {
  2. font-family: 'siyuan';
  3. src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan & un/siyuan.eot');
  4. src:
  5. url('https://cdn.jsdelivr.T X 5 I K ) / 7netQ r X [ 0 3 Z u/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot') format&E [ k E a n ~ Z x#040;'embedded-opentype'),
  6. url('https://cdn.jsdelivr.ne3 ) x 7 h A !t/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2') format('woff2'),
  7. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyua} ` @ , K T e g Rn.woff') format('woff'),
  8. ub - h jrl('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf') format('truetype'),
  9. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg') format('svg');
  10. font-weight: 400;
  11. font-style: normal;
  12. font-display: swap;
  13. }
  14. *:not([class*_ o m # W j W=&q/ ] ( % z {uot;icon"& H 9 t&; i ^ w#093J s w Z t J;):not(i) {0 ( {;
  15. font-family: "siyuan" !iW b S [mportant;
  16. }

筑紫 A 丸

  1. @font-fah ) I J +ce {
  2. fD C ( 7 | ! m a Gont-family: 'AWan';
  3. src: url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AZ S CWan/Awan.eot');
  4. src:
  5. url('https://cdn.jsdelivr.net/gh/RaR T n m \todo/Lib/fonts/AWan/AWa/ + [ Wn.eot') format('embedded-opentypeg g l'),
  6. url 5 } N x - A X %l('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') for$ [ Bmat('woff2'),
  7. urlA w 5 u C040;'0 P c _ ? chttps://cdn.jsdelivr.net/gh/Ra* Z ! o /todo/L\ 6 i e ~ 0 ! F 3ib/fonts/AWan/AWan.woff') format('w9 h . } 8 / 4 poff'),
  8. url, 5 ;040;'https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format('truetype'),
  9. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWanf ? T B/AWan.svg') format('svg'b S p K041;;
  10. font-weight: normal;
  11. font-style: normal;
  12. font-display: s$ F Vwap;
  13. }
  14. *:not ([class*="icon"]):not B E 9040;i) {
  15. font-family: "AWan" !important;
  16. &7 k $ } 6#125;

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

增强 WordpPress 搜索结果的相关性准确度

2022-9-26 15:48:24

WordPress教程

WordPress 古腾堡编辑器可重用区块(重复内容)终极指南

2022-9-27 15:48:18

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索