增加衬线和无衬线字体配置

This commit is contained in:
tangly1024.com
2023-02-09 10:06:05 +08:00
parent 2e4f0484bc
commit 5449b9afb4
12 changed files with 14 additions and 13 deletions

View File

@@ -22,7 +22,8 @@ const BLOG = {
CONTACT_TELEGRAM: 'https://t.me/tangly_1024', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_LINKEDIN: '', // 你的linkedIn 首页
// 网站默认使用PingFangSC及NotoSansSC
// 网站默认使用PingFangSC及NotoSansSC
FONT_STYLE: 'font-serif', // ['font-serif','font-sans'] 两种可选,分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115
// 如需自定义字体请将CUSTOM_FONT改为 true并将CUSTOM_FONT_URL改为你的字体CSS地址同时在CUSTOM_FONT_SANS与CUSTOM_FONT_SERIF中指定你的font-family
CUSTOM_FONT: process.env.NEXT_PUBLIC_CUSTOM_FONT || false, // 是否使用自定义字体
// 自定义字体示例: 请先将 CUSTOM_FONT 改为 true 并将 CUSTOM_FONT_URL 改为你的字体CSS地址同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily

View File

@@ -17,7 +17,7 @@ class MyDocument extends Document {
<CommonScript />
</Head>
<body className={'tracking-wider subpixel-antialiased bg-day dark:bg-night'}>
<body className={`${BLOG.FONT_STYLE} tracking-wider bg-day dark:bg-night`}>
<Main />
<NextScript />
</body>

View File

@@ -5,7 +5,7 @@ import BLOG from '@/blog.config'
export const LayoutCategory = props => {
const { category } = props
const slotTop = <div className='flex items-center font-sans py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类</div>{category}</div>
const slotTop = <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-th' />分类</div>{category}</div>
return <LayoutBase {...props} slotTop={slotTop}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}

View File

@@ -43,10 +43,10 @@ export const LayoutSlug = props => {
{!lock && <div id='container'>
{/* title */}
<h1 className="text-3xl pt-12 font-sans dark:text-gray-300">{post?.title}</h1>
<h1 className="text-3xl pt-12 dark:text-gray-300">{post?.title}</h1>
{/* meta */}
<section className="py-2 items-center text-sm font-sans px-1">
<section className="py-2 items-center text-sm px-1">
<div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
<span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
<span className='mx-1'>|</span>

View File

@@ -5,7 +5,7 @@ import BlogPostListPage from './components/BlogPostListPage'
export const LayoutTag = (props) => {
const { tag } = props
const slotTop = <div className='flex items-center font-sans py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签</div>{tag}</div>
const slotTop = <div className='flex items-center py-8'><div className='text-xl'><i className='mr-2 fas fa-tag'/>标签</div>{tag}</div>
return <LayoutBase {...props} slotTop={slotTop}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}

View File

@@ -22,7 +22,7 @@ export const ArticleLock = props => {
}
}
return <div id='container' className='w-full flex justify-center items-center h-96 font-sans'>
return <div id='container' className='w-full flex justify-center items-center h-96 '>
<div className='text-center space-y-3'>
<div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
<div className='flex mx-4'>

View File

@@ -20,7 +20,7 @@ const BlogPostCard = ({ post, showSummary }) => {
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className={
'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
'cursor-pointer font-bold hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
}>
{post.title}

View File

@@ -65,7 +65,7 @@ const Catalog = ({ toc }) => {
<Progress />
</div>
<div className='overflow-y-auto max-h-96 overscroll-none scroll-hidden' ref={tRef}>
<nav className='h-full font-sans text-black'>
<nav className='h-full text-black'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
tocIds.push(id)

View File

@@ -21,7 +21,7 @@ function GroupMenu ({ customNav }) {
}
return (
<nav id='nav' className='font-sans text-md'>
<nav id='nav' className=' text-md'>
{links.map(link => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)

View File

@@ -6,7 +6,7 @@ import SocialButton from './SocialButton'
const InfoCard = (props) => {
const { siteInfo } = props
return <div id='info-card' className='py-4'>
<div className='items-center justify-center font-sans '>
<div className='items-center justify-center '>
<div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>

View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
export default function LogoBar (props) {
const { siteInfo } = props
return (
<div id='top-wrapper' className='w-full flex items-center font-sans'>
<div id='top-wrapper' className='w-full flex items-center '>
<Link href='/' className='text-md md:text-xl dark:text-gray-200'>
{siteInfo?.title}
</Link>

View File

@@ -28,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
}, [percent])
return (
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray font-sans">
<div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray ">
<div
className="h-4 bg-gray-600 duration-200"
style={{ width: `${percent}%` }}