阿里图标库

Font class 用法

只需要引入 css 和字体文件,把字体编码为 base64 格式,那只需要引入一个 css 文件即可

import fetch from 'node-fetch'
import fs from 'fs'
import prompts from 'prompts'

const main = async () => {
const validateUrl = url => (/\/(font.*)\.css/.test(url) ? true : '地址不对哦')
const questions = [
  {
    type: 'text',
    name: 'url',
    message: '输入下iconfont的fontClass地址?',
    validate: validateUrl
  }
]
const { url } = await prompts(questions)
const cssUrl = `https://${url}`
// 指定保存字体文件的目录
const fontDirectory = './fonts'
const cssDirectory = '.s'
// 创建字体文件保存目录
if (!fs.existsSync(fontDirectory)) {
  fs.mkdirSync(fontDirectory)
}
// 使用node-fetch获取CSS文件内容
fetch(cssUrl)
    .then(response => response.text())
    .then(cssContent => {
      // 使用正则表达式提取字体文件的URL
      const fontUrls = cssContent.match(/url\('\/\/([^']+)'\)/g)

      if (fontUrls) {
        // 使用Promise.all()等待所有字体文件的下载完成
        Promise.all(
          fontUrls.map(fontUrl => {
            // 提取URL中的字体文件链接
            const urlMatch = fontUrl.match(/url\('\/\/([^']+)'\)/)
            if (urlMatch && urlMatch[1]) {
              const fontFileUrl = `https://${urlMatch[1]}` // 添加协议
              // 下载字体文件并转换为Base64编码
              return fetchAndEncodeToBase64(fontFileUrl)
            }
            return Promise.resolve('')
          })
        ).then(encodedFonts => {
          // 将所有字体的Base64编码插入CSS
          encodedFonts.forEach((encodedFont, index) => {
            cssContent = cssContent.replace(fontUrls[index], encodedFont)
          })

          // 生成包含所有字体的Base64编码的CSS文件
          fs.writeFileSync('src/styles/iconfont.scss', cssContent)
          console.log('包含所有字体的Base64编码的CSS文件已生成')
        })
      } else {
        console.error('未找到字体文件URL')
      }
    })
    .catch(error => {
      console.error('下载CSS文件时出错:', error)
    })
}

// 下载字体文件并转换为Base64编码
async function fetchAndEncodeToBase64(fontFileUrl) {
  try {
    const response = await fetch(fontFileUrl)
    const buffer = await response.arrayBuffer()
    const base64Font = Buffer.from(buffer).toString('base64')
    const ext = fontFileUrl.substring(fontFileUrl.lastIndexOf('.') + 1)
    return `url('data:application/font-${ext};charset=utf-8;base64,${base64Font}')`
  } catch (error) {
    console.error(`下载字体文件并转换为Base64编码时出错:${fontFileUrl}`, error)
    return '' // 返回一个空字符串以避免破坏CSS
  }
}

main()
Last Updated: