前端多主题多字体,如何实现?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1194 天前的主题，其中的信息可能已经有所发展或是发生改变。

问题: 现在大字超大字,不同主题,都做了不同的设计稿,不同字体之间并不是按比列缩放的.而且设计稿这个问题,并不能很好解决,是公司问题.

解决办法: 普通字,大字,超大字,一个页面三套样式,再配置主题色的 class 切换来实现,暂时看效果还行,就是代码量比较多,有无其他好的解决办法.

注: 设计稿这个没办法, 三套设计稿关系不是很大,缩放没统一比列.

比列

大字

字体之

办法

3 条回复 • 2021-08-19 09:44:24 +08:00

tanranran

2021-08-19 01:22:36 +08:00

可以用态换换肤

<html lang="en">
<head>
<title>js 动态换肤</title>

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
<body>
<h3 class="title">js 动态换肤</h3>
<script>
// 1. 主题颜色配置
var colors = {
red: {
themeColor: '#FF0000'
},
blue: {
themeColor: '#0000FF'
}
}

// 2. 异步获取样式
var styles = ''
axios.get('theme.css').then((resp=> {
const colorMap = {
'#FF0000': 'themeColor'
}
styles = resp.data
Object.keys(colorMap).forEach(key => {
const value = colorMap[key]
styles = styles.replace(new RegExp(key, 'ig'), value)
console.log(styles)
})
writeNewStyle (styles, colors.red)
}))

// 3.换色
// console.log 中输入 writeNewStyle (styles, colors.blue)可以换蓝色主题
// console.log 中输入 writeNewStyle (styles, colors.blue)可以换红色主题
function writeNewStyle (originalStyle, colors) {
let oldEl = document.getElementById('temp-style')
let cssText = originalStyle

Object.keys(colors).forEach(key => {
cssText = cssText.replace(new RegExp(key, 'ig'), colors[key])
})
const style = document.createElement('style')
style.innerText = cssText
style.id = 'temp-style'

oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style)
}
</script>
</body>
</html>

.title {
color: #FF0000
}

xiaopc

2021-08-19 09:14:31 +08:00 via iPhone

如果只需要考虑 Chrome 49+ 的话，可以用 CSS variables
要兼容更好的话，用 sass/scss 写，生成的时候再编译成 CSS

MuscleOf2016

2021-08-19 09:44:24 +08:00

@xiaopc 并不能用，会不兼容