V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MuscleOf2016
V2EX  ›  前端开发

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

  •  
  •   MuscleOf2016 · 160 天前 · 701 次点击
    这是一个创建于 160 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    3 条回复    2021-08-19 09:44:24 +08:00
    tanranran
        1
    tanranran  
       160 天前
    可以用态换换肤

    <html lang="en">
    <head>
    <title>js 动态换肤</title>
    <!-- 利用 axios 实现异步加载样式-->
    <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
        2
    xiaopc  
       159 天前 via iPhone
    如果只需要考虑 Chrome 49+ 的话,可以用 CSS variables
    要兼容更好的话,用 sass/scss 写,生成的时候再编译成 CSS
    MuscleOf2016
        3
    MuscleOf2016  
    OP
       159 天前
    @xiaopc 并不能用,会不兼容
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1151 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 19:54 · PVG 03:54 · LAX 11:54 · JFK 14:54
    ♥ Do have faith in what you're doing.