首页 > 其他分享 >wordpress设置自定义字体

wordpress设置自定义字体

时间:2024-11-01 21:46:58浏览次数:3  
标签:自定义 fonts custom 字体 wordpress css

wordpress设置自定义字体:

失败的操作过程:

写在最前:试了一天多的引用字体,方法包括但不限于:

  1. 下载.ttf.otf格式字体,转化为wotfwotf2格式,挂在github仓库用CDN引用,得到css链接

image-20241031224158147

​ 然后这里填字体名称和CSS链接,试了很久很久,都失败了,不知道是不是字体本身转换的时候出错了。

image-20241031224433169

​ 按主题官方文档上应该是这样吧?存疑,以后再想想。

  1. 把字体挂到服务器本地,然后引用。

按理来说这种应该是用空间换时间的方法,具体就是按照这篇文章:[如何不使用任何插件在WordPress中添加自定义字体? - 闪电博 (wbolt.com)](https://www.wbolt.com/custom-fonts-in-wordpress-without-plugins.html#:~:text=1 嵌入谷歌字体: 完成字体选择后,点击页面底部的 “嵌入” 按钮。 Google Fonts 将生成一个嵌入代码,其中包含指向所选字体的链接。,3 字体样式和大小: 自定义您希望在网站上使用的字体样式和大小(Weight)。 Google Fonts 提供了特定的 CSS 代码片段,您可以将其插入主题的样式表(style.css)中,以应用所需的字体样式。)

具体来说,在wp-content下创建custom-fonts文件夹,然后把字体文件放进去,再创建include_font.css文件

image-20241031225104754

include_font.css仿照文档里填

image-20241031225259454

主题的模板函数里填入:

function add_custom_fonts() {
wp_enqueue_style( 'my-styles', WP_CONTENT_URL . '/custom-fonts/include_font.css', array(), '1.0.0' );
}				
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );			

image-20241031225449357

最后在额外css里填入:

(使用 “*”(星号)选择器,将自定义字体全局应用到所有相关元素。这样可以确保整个网站的一致性。)

*{
--fontFamily: "wenyue_xinqingnianti_authow8j", sans-serif;
}

image-20241031225910769

最后发布了还是没成功。

暂且把自己的操作失败过程记下来,以后再看看哪错了吧,挖个坑。


接下来是能成功的操作:

霞鹜文楷(LXGW WenKai Screen)

  1. 引用字体CDN链接

image-20241031221735320

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" />
  1. 改默认字体

image-20241031223722220

  1. 改markdown文档中标记文本的格式

效果是黄色的字体:

image-20241031223620814

image-20241031223547010

参考文献:

在站点网页中使用霞鹜文楷(LXGW WenKai) - 枫茶舍 (hsiaofeng.com)

标签:自定义,fonts,custom,字体,wordpress,css
From: https://www.cnblogs.com/7dragonpig/p/18521350

相关文章

  • 4-10分钟搭建个免费的博客(个人笔记),初识wordpress
    最近几年博客的开源项目wordpress火得不行,今天借着使用宝塔的机会,快速试了一下,发现其功能确实比较全面,使用起来学习成本也非常低。把这个过程记录下来,让一个绝对的新手,按着操作,也可以搭建起来。同时也截图一下wordpress的后台,让大家通过本篇文章,对wp也有个直观的认识。为了加速......
  • vue自定义组件实现v-model双向数据绑定
    一、Vue2 实现自定义组件双向数据绑定①v-model 实现双向数据绑定 在vue2中,子组件上使用v-model的值默认绑定到子组件的props.value属性上,由于子组件不能改变父组件传来的属性,所以需要通过$emit触发事件使得父组件中数据的变化,然后再同步到子组件。vue2默认触发v-model......
  • 给 WordPress 添加文章浏览量统计功能
    前几天给一个基于WordPress的网站添加了文章的浏览量统计功能,但统计了几天后发现,统计了个寂寞,来访的除了蜘蛛就是自己,意义不大,索性删除了罢。想要统计,后面可以接入专门的网站统计系统,比如GoogleAnalytics。下面把WordPress文章浏览量统计代码分享出来。下面的代码我是加到f......
  • 自定义 legend 颜色
    legend:[{data:[{name:'Excellent',itemStyle:{color:'rgb(147210243/50%)'}},{name:'Good',itemStyle:{......
  • 胎神小游戏 - 自定义小游戏-改
    ```cpp#include<bits/stdc++.h>#include<windows.h>#include<stdio.h>#include<conio.h>#include<time.h>usingnamespacestd;boolBlack;voidColor(inta){if(Black==1){SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HAN......
  • Web 开发:自定义路由器
    在Web开发中,自定义路由器(即自定义ServeMux实例)可以带来更大的灵活性和控制。1.需要不同的路由策略默认的DefaultServeMux适合简单的URL路由需求,但在一些更复杂的场景下(例如需要动态路由、参数化路径等),自定义路由器或第三方路由库(如gorilla/mux)通常更灵活。2.多域名......
  • python使用魔法函数__getitem__实现字典和列表式访问自定义类型
    起因想起C++可以实现运算符重载,以实现以数组的方式([])访问我们的类.我想要实现一个类,可以同时用类似于字典和就想到python能不能实现这个效果,而且显然是可以的,不然numpy是怎么实现属于自己的数组的?#期望实现效果classmyclass: passc=myclass()#像这样使用[]访......
  • 可以免费商用的字体下载
    ​ 这里收录的可以免费商用的字体,目前中文字体1308款,英文字体980款,共约2288多款字体。如帮助了您,记得Star一下,收藏不迷路。下载地址:Gitee:https://gitee.com/dengzhenhua/free-fontsGitHub:https://github.com/dengcao/free-fonts由于gitee的仓库容量受限,没法上传更多字体,缺少......
  • 自己怎么修改网站的版面,如何自定义网站布局与设计
    选择编辑工具:如果你使用的是网站构建平台(如WordPress、Wix等),可以直接使用平台提供的可视化编辑器。如果是自建网站,需要使用代码编辑器(如VSCode、SublimeText等)。备份现有文件:在修改之前,务必备份现有的文件,以防万一出现问题可以恢复。学习基础设计:了解网页设计的基本原则,......
  • Java 自定义异常
    注:建议先阅读Java异常分类Java中使用自定义异常类,一般是继承Exception或者它的某个子类。如果父类是RuntimeException或它的某个子类,则自定义异常也是未受检异常;如果是Exception或Exception的其他子类,则自定义异常是受检异常。Java中的一些异常类(比如NullPointer......