html 如何减少FontAwesome 5.3.1的大小

x0fgdtte  于 10个月前  发布在  其他
关注(0)|答案(3)|浏览(112)

Using SVG with JavaScriptUsing Web Fonts with CSS大20倍。
如果我使用Using SVG with JavaScript,这是一个大问题,不算其他js,jquery,bootstrap。仅加载FontAwesome 5几乎使用了1MB。
有谁知道如何减少文件大小?

4ioopgfo

4ioopgfo1#

你可能并不需要Font-Awesome的全部。不要全部加载。只选择你需要的图标,并将它们单独加载为<img src='path'>,其中路径指向你从here下载的.svg文件。如果你喜欢,你可以像Google那样将所有这些图像合并组合成一个spritesheet [google.com spritesheet]。
如果你坚持加载所有这些资产只是为了支持Font Awesome,gzip你的文本资产(html,js,css)将 * 大大 * 减少文件大小。有很多教程介绍如何gzip和上传资产到静态文件服务器example
你可能也希望将你的JS文件合并合并到一个文件中,以最小化网络流量。为此,你需要某种“构建系统”,如rollupwebpack
如果你真的想调优性能,请查看High Performance WebsitesEven Faster Websites,这两本非凡的O 'REILLY书籍可以帮助你提高内容交付的性能。

vtwuwzda

vtwuwzda2#

我使用https://fontforge.org删除未使用的字形
1.安装(适用于Mac,也适用于大多数平台)
brew install fontforge

  1. Python 3脚本
    fa-prune.py
#!/usr/local/bin/python3
import fontforge
import re
import glob
import os
import sys

if len(sys.argv) < 3:
    sys.exit()

#https://fontforge.org/docs/scripting/python/fontforge.html
#fa-prune.py ./assests/fontawesome './pages/**/*,./components/**/*,./layouts/**/*'
#fa-prune.py ./web/fontawesome './public/assets/**/*.js'

# Scan webpack assets
# rootDir = '/Users/ybb/devel/home/yo/web/fontawesome'
# scanPaths = [
#     '/Users/ybb/devel/home/yo/public/assets/**/*.js'
# ]

# Scan nuxt source
# rootDir = '/Users/ybb/devel/home/cs-web/assets/fontawesome'
# scanPaths = [
#     '/Users/ybb/devel/home/cs-web/pages/**/*',
#     '/Users/ybb/devel/home/cs-web/components/**/*',
#     '/Users/ybb/devel/home/cs-web/layouts/**/*'
# ]

rootDir = os.path.abspath(sys.argv[1])
scanPaths = list(map(lambda x: os.path.abspath(x), sys.argv[2].split(',')))

# print(rootDir, scanPaths)
# sys.exit()

inDir = rootDir + '/webfonts'
outDir = rootDir + '/webfonts-min'

fonts = {'fas': 'fa-solid-900.svg', 'far': 'fa-regular-400.svg'}
exts = ['svg', 'ttf', 'woff', 'woff2', 'eot']

icons = {}

pattern = re.compile("\"(" + '|'.join(list(fonts)) + ")\s(fa-\w[-\w]*)\"")

for scanPath in scanPaths:
    for filename in glob.glob(scanPath, recursive=True):
        if not os.path.isdir(filename):
            for line in open(filename):
                for match in re.finditer(pattern, line):
                    if not match.group(1) in icons:
                        #print(match.group(2))
                        icons[match.group(1)] = set()
                    icons[match.group(1)].add(match.group(2)[3:])

os.makedirs(outDir, exist_ok=True)

for font in icons:
    f = fontforge.open(inDir + '/' + fonts[font])

    for icon in icons[font]:
        f.selection.select(('more', None), icon)

    for i in f.selection:
        try:
            name, width = f[i].glyphname, f[i].width
            print(font, i, name, width)
        except:
            pass

    f.selection.invert()
    for i in f.selection.byGlyphs:
        f.removeGlyph(i)    
            
    filePath = outDir + '/' + fonts[font].rsplit('.', 1)[0]
    for ext in exts:
        f.generate(filePath + '.' + ext)
        print(filePath + '.' + ext, 'generated')
        
    os.remove(filePath + '.afm')

字符串
1.预期输出
fa-prune.py./fontawesome '../public/assets/**/*.js'

fas 114 heart 512
fas 122 times 352
fas 123 search-plus 512
fas 190 arrow-left 448
fas 355 ellipsis-v 192
fas 385 thumbs-up 512
fas 386 thumbs-down 512
fas 467 venus 288
fas 468 mars 384
fas 698 level-down-alt 320
fas 702 map-marker-alt 384
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.svg generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.ttf generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff2 generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.eot generated
far 114 heart 512
far 121 check 512
far 122 times 320
far 125 power-off 512
far 127 cog 512
far 190 arrow-left 448
far 204 eye 576
far 206 exclamation-triangle 576
far 224 comments 576
far 256 link 512
far 354 ellipsis-h 512
far 428 paper-plane 512
far 429 history 512
far 520 comment-alt 512
far 570 trash-alt 448
far 589 images 576
far 842 comment-alt-lines 512
far 909 user-friends 640
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.svg generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.ttf generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff2 generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.eot generated


1.设置fontawesome字体路径
fonts.scss

$fa-font-path: "../fontawesome/webfonts-min";
@import "../fontawesome/scss/solid";
@import "../fontawesome/scss/regular";

rsaldnfx

rsaldnfx3#

您可以查看www.fontcut.com以获取您需要的图标。我们尝试了11个图标(专业版),最终得到的字体文件大小为3k,CSS文件大小为14k。如果您不需要旋转或不同大小的花哨Fontawesome,您可以获得更小的文件。
select ions
font files
css file

相关问题