Using SVG with JavaScript比Using Web Fonts with CSS大20倍。如果我使用Using SVG with JavaScript,这是一个大问题,不算其他js,jquery,bootstrap。仅加载FontAwesome 5几乎使用了1MB。有谁知道如何减少文件大小?
Using SVG with JavaScript
Using Web Fonts with CSS
4ioopgfo1#
你可能并不需要Font-Awesome的全部。不要全部加载。只选择你需要的图标,并将它们单独加载为<img src='path'>,其中路径指向你从here下载的.svg文件。如果你喜欢,你可以像Google那样将所有这些图像合并组合成一个spritesheet [google.com spritesheet]。如果你坚持加载所有这些资产只是为了支持Font Awesome,gzip你的文本资产(html,js,css)将 * 大大 * 减少文件大小。有很多教程介绍如何gzip和上传资产到静态文件服务器example。你可能也希望将你的JS文件合并合并到一个文件中,以最小化网络流量。为此,你需要某种“构建系统”,如rollup或webpack。如果你真的想调优性能,请查看High Performance Websites和Even Faster Websites,这两本非凡的O 'REILLY书籍可以帮助你提高内容交付的性能。
<img src='path'>
.svg
vtwuwzda2#
我使用https://fontforge.org删除未使用的字形1.安装(适用于Mac,也适用于大多数平台)brew install fontforge
#!/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";
型
rsaldnfx3#
您可以查看www.fontcut.com以获取您需要的图标。我们尝试了11个图标(专业版),最终得到的字体文件大小为3k,CSS文件大小为14k。如果您不需要旋转或不同大小的花哨Fontawesome,您可以获得更小的文件。select ions的font files的css file的
3条答案
按热度按时间4ioopgfo1#
你可能并不需要Font-Awesome的全部。不要全部加载。只选择你需要的图标,并将它们单独加载为
<img src='path'>
,其中路径指向你从here下载的.svg
文件。如果你喜欢,你可以像Google那样将所有这些图像合并组合成一个spritesheet [google.com spritesheet]。如果你坚持加载所有这些资产只是为了支持Font Awesome,gzip你的文本资产(html,js,css)将 * 大大 * 减少文件大小。有很多教程介绍如何gzip和上传资产到静态文件服务器example。
你可能也希望将你的JS文件合并合并到一个文件中,以最小化网络流量。为此,你需要某种“构建系统”,如rollup或webpack。
如果你真的想调优性能,请查看High Performance Websites和Even Faster Websites,这两本非凡的O 'REILLY书籍可以帮助你提高内容交付的性能。
vtwuwzda2#
我使用https://fontforge.org删除未使用的字形
1.安装(适用于Mac,也适用于大多数平台)
brew install fontforge
fa-prune.py
字符串
1.预期输出
fa-prune.py./fontawesome '../public/assets/**/*.js'
型
1.设置fontawesome字体路径
fonts.scss
型
rsaldnfx3#
您可以查看www.fontcut.com以获取您需要的图标。我们尝试了11个图标(专业版),最终得到的字体文件大小为3k,CSS文件大小为14k。如果您不需要旋转或不同大小的花哨Fontawesome,您可以获得更小的文件。
select ions的
font files的
css file的