修改字体

您所在的位置:网站首页 hello粗体字 修改字体

修改字体

2024-07-18 04:54:36| 来源: 网络整理| 查看: 265

此页面指导你如何自定义主题字体。

字体族

对于常见的字体族,一般可以分为 衬线体[1] 和 无衬线体[2]。

中文字体

对于中文字体来说,常见的无衬线体有黑体、微软雅黑等,而常见的衬线体包括楷体、宋体、仿宋等。

修改主题字体

主题在 .vuepress/styles/palette.scss 中提供了 $font-family、$font-family-heading 和 $font-family-mono 三个变量控制字体。

$font-family: 普通文本上使用的字体$font-family-heading: 用于标题元素的字体$font-family-mono: 代码上使用的字体

默认情况下,主题在普通文本上使用无衬线体。

使用衬线体

如果你更喜欢衬线体,你可以自行修改 $font-family 为你想要的字体。

中文博客下最常使用的字体是 Adobe 发布的思源宋体[3],因为它具有非常宽松的协议。当然,思源宋体并不存在于大多设备上,所以你可能需要导入这个字体。你可以通过 GitHub 下载该字体引入或直接使用 Google Font CDN。

如下字体族是我们推荐的衬线体首选:

$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", "PingFang SC", "Hiragino Sans GB", "Noto Serif SC", "Microsoft Yahei", "WenQuanYi Micro Hei", "ST Heiti", sans-serif';后备字体

由于不同平台、不同操作系统以及不同的安装方式 (slim/full) 会导致字体库中的字体数量以及类别产生较大差异,你应该尽可能地设置多个字体,并确保后备字体[4]存在。

最佳实践

后备字体[4:1]可以确保你的网站在不同操作系统以及安装了不同字体的设备上显示良好。

字体库

你可以在 Google Fonts 中找到更多字体,并可以在线预览与下载。

请在网页中搜索并选择你想要的字体与粗细,然后点击右侧的 Select 按钮,将其添加到你的选择列表中,之后点击右上角的按钮查看你的收藏字体,并获取链接在 VuePress 的配置文件中导入。

我们假定你选择了思源宋体 (Noto Serif SC) 字体的 400,500,700 字体,点击右上角按钮后,Google 会在侧边栏给出下方的代码:

font-family: "Noto Serif SC", serif;

那么你需要做的就是在 VuePress 配置文件中添加如下代码导入并使用它们:

import { defineUserConfig } from "vuepress"; export default defineUserConfig({ // ... head: [ // ... // 导入相应链接 ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }], [ "link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }, ], [ "link", { href: "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap", rel: "stylesheet", }, ], ], // ... });

同时在调色板文件中修改 $font-family 变量:

// 应用字体 $font-family: '"Noto Serif SC", serif';

这样你就可以在网站中使用思源宋体字体了。

思源宋体 Demo人人生而自由

人人生而自由,在尊严和权利上一律平等。他们赋有理性和良心,并应以弟兄关系的精神相对待。

相关简介: https://www.zhihu.com/topic/19559432/intro ↩︎

相关简介: https://www.zhihu.com/topic/19559433/intro ↩︎

基于「开源字体授权发布」,并且在文档中说明可以基于其源代码进行二次修改后使用 (商用或者个人使用),所以没有任何版权问题。 ↩︎

摘自维基百科

后备字体 (Fallback font) 是指在当时显示的字型缺乏某些字元时,被用于显示缺失字元的字体。因为其作为显示的最后一道防线,后备字体应该尽可能包含所有 Unicode 字元。

当缺失字元没有后备字体用于显示时,通常会将缺失字元改为黑色方块、白色空心方块、问号、Unicode 占位字元(U+FFFD)显示,或者干脆略过该字元。在实务上,像是 CSS 等支援字体列表依序显示的系统,通常会将一或多套后备字体置入列表最后,以防止缺字的情况发生。 ↩︎ ↩︎



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


    图片新闻

    实验室药品柜的特性有哪些
    实验室药品柜是实验室家具的重要组成部分之一,主要
    小学科学实验中有哪些教学
    计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
    实验室各种仪器原理动图讲
    1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
    高中化学常见仪器及实验装
    1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
    微生物操作主要设备和器具
    今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
    浅谈通风柜使用基本常识
     众所周知,通风柜功能中最主要的就是排气功能。在

    专题文章

      CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭