html 如何减少FontAwesome 5.3.1的大小

x0fgdtte  于 2023-11-15  发布在  其他
关注(0)|答案(3)|浏览(152)

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
  1. #!/usr/local/bin/python3
  2. import fontforge
  3. import re
  4. import glob
  5. import os
  6. import sys
  7. if len(sys.argv) < 3:
  8. sys.exit()
  9. #https://fontforge.org/docs/scripting/python/fontforge.html
  10. #fa-prune.py ./assests/fontawesome './pages/**/*,./components/**/*,./layouts/**/*'
  11. #fa-prune.py ./web/fontawesome './public/assets/**/*.js'
  12. # Scan webpack assets
  13. # rootDir = '/Users/ybb/devel/home/yo/web/fontawesome'
  14. # scanPaths = [
  15. # '/Users/ybb/devel/home/yo/public/assets/**/*.js'
  16. # ]
  17. # Scan nuxt source
  18. # rootDir = '/Users/ybb/devel/home/cs-web/assets/fontawesome'
  19. # scanPaths = [
  20. # '/Users/ybb/devel/home/cs-web/pages/**/*',
  21. # '/Users/ybb/devel/home/cs-web/components/**/*',
  22. # '/Users/ybb/devel/home/cs-web/layouts/**/*'
  23. # ]
  24. rootDir = os.path.abspath(sys.argv[1])
  25. scanPaths = list(map(lambda x: os.path.abspath(x), sys.argv[2].split(',')))
  26. # print(rootDir, scanPaths)
  27. # sys.exit()
  28. inDir = rootDir + '/webfonts'
  29. outDir = rootDir + '/webfonts-min'
  30. fonts = {'fas': 'fa-solid-900.svg', 'far': 'fa-regular-400.svg'}
  31. exts = ['svg', 'ttf', 'woff', 'woff2', 'eot']
  32. icons = {}
  33. pattern = re.compile("\"(" + '|'.join(list(fonts)) + ")\s(fa-\w[-\w]*)\"")
  34. for scanPath in scanPaths:
  35. for filename in glob.glob(scanPath, recursive=True):
  36. if not os.path.isdir(filename):
  37. for line in open(filename):
  38. for match in re.finditer(pattern, line):
  39. if not match.group(1) in icons:
  40. #print(match.group(2))
  41. icons[match.group(1)] = set()
  42. icons[match.group(1)].add(match.group(2)[3:])
  43. os.makedirs(outDir, exist_ok=True)
  44. for font in icons:
  45. f = fontforge.open(inDir + '/' + fonts[font])
  46. for icon in icons[font]:
  47. f.selection.select(('more', None), icon)
  48. for i in f.selection:
  49. try:
  50. name, width = f[i].glyphname, f[i].width
  51. print(font, i, name, width)
  52. except:
  53. pass
  54. f.selection.invert()
  55. for i in f.selection.byGlyphs:
  56. f.removeGlyph(i)
  57. filePath = outDir + '/' + fonts[font].rsplit('.', 1)[0]
  58. for ext in exts:
  59. f.generate(filePath + '.' + ext)
  60. print(filePath + '.' + ext, 'generated')
  61. os.remove(filePath + '.afm')

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

  1. fas 114 heart 512
  2. fas 122 times 352
  3. fas 123 search-plus 512
  4. fas 190 arrow-left 448
  5. fas 355 ellipsis-v 192
  6. fas 385 thumbs-up 512
  7. fas 386 thumbs-down 512
  8. fas 467 venus 288
  9. fas 468 mars 384
  10. fas 698 level-down-alt 320
  11. fas 702 map-marker-alt 384
  12. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.svg generated
  13. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.ttf generated
  14. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff generated
  15. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff2 generated
  16. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.eot generated
  17. far 114 heart 512
  18. far 121 check 512
  19. far 122 times 320
  20. far 125 power-off 512
  21. far 127 cog 512
  22. far 190 arrow-left 448
  23. far 204 eye 576
  24. far 206 exclamation-triangle 576
  25. far 224 comments 576
  26. far 256 link 512
  27. far 354 ellipsis-h 512
  28. far 428 paper-plane 512
  29. far 429 history 512
  30. far 520 comment-alt 512
  31. far 570 trash-alt 448
  32. far 589 images 576
  33. far 842 comment-alt-lines 512
  34. far 909 user-friends 640
  35. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.svg generated
  36. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.ttf generated
  37. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff generated
  38. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff2 generated
  39. /Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.eot generated


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

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

展开查看全部
rsaldnfx

rsaldnfx3#

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

相关问题