fontcustom

Generate custom icon webfonts from the comfort of the command line.

  • 所有者: FontCustom/fontcustom
  • 平台:
  • 许可证:
  • 分类:
  • 主题:
  • 喜欢:
    0
      比较:

Github星跟踪图

Gem Version
Build Status
Code Quality Bountysource

Font Custom

Icon fonts from the command line.

Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.)
from a collection of SVGs
(example).

Changelog
Bugs/Support
Contribute!

Installation

Requires Ruby 1.9.3+, WOFF2, FontForge with Python scripting.

# On Mac
brew tap bramstein/webfonttools
brew update
brew install woff2

brew install fontforge --with-python
brew install eot-utils
gem install fontcustom

# On Linux
sudo apt-get install zlib1g-dev fontforge
git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli && cd sfnt2woff-zopfli && make && mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
git clone --recursive https://github.com/google/woff2.git && cd woff2 && make clean all && sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
gem install fontcustom

####Note for windows:

  1. Install fontforge: http://fontforge.github.io/en-US/downloads/windows/
  • Install to a path without spaces, eg c:\FontForgeBuilds
  • At the end of the installer check the 'run fontforge' box. It finishes some set up.
  1. Add the installation path to your System PATH variable (c:\FontForgeBuilds\bin)
  2. Open up a new command prompt and test it. fontforge -help
  3. gem install fontcustom

Quick Start

fontcustom compile my/vectors  # Compiles icons into `fontcustom/`
fontcustom watch my/vectors    # Compiles when vectors are changed/added/removed
fontcustom compile             # Uses options from `./fontcustom.yml` or `config/fontcustom.yml`
fontcustom config              # Generate a blank a config file
fontcustom help                # See all options

Configuration

To manage settings between compiles, run fontcustom config to generate a
config file. Inside, you'll find a list of all possible options.
Each option is also available as a dash-case command line flag (e.g.
--css-selector) that overrides the config file.

SVG Guidelines

  • All colors will be rendered identically. Watch out for white fills!
  • Use only solid colors. SVGs with transparency will be skipped.
  • For greater precision in curved icons, use fills instead strokes and try
    these solutions
    .
  • Activating autowidth trims horizontal white space from each glyph. This
    can be much easier than centering dozens of SVGs by hand.

Advanced

For use with Compass and/or Rails

Set templates to include scss-rails to generate a SCSS partial with the
compatible font-url() helper. You'll most likely also need to set
preprocessor_path as the relative path from your compiled CSS to your output
directory.

Example Use in Rails

Add gem 'fontcustom' to your gem file.

bundle

Create a fontcustom.yml file with something like this:

# config/fontcustom.yml

font_name: icons
css_selector: .icon-{{glyph}}
preprocessor_path: ""
autowidth: false
no_hash: true
force: false
debug: false
quiet: false

input:
  vectors: app/assets/icons

output:
  fonts: app/assets/fonts
  css: app/assets/stylesheets

templates:
 - scss

This tells the gem to take the vectors from app/assets/icons and create fonts and stylesheets for them.

Create a file in lib/tasks called icons.rake :

namespace :icons do
  task :compile do
    puts "Compiling icons..."
    puts %x(fontcustom compile)
  end
end

Load up the icons directory and test it out.

Run this command with

rake icons:compile

This should run the installed and configured gem to create your icons:

Compiling icons...
      create  .fontcustom-manifest.json
      create  app/assets/fonts
      create  app/assets/fonts/icons.ttf
              app/assets/fonts/icons.svg
              app/assets/fonts/icons.woff
              app/assets/fonts/icons.eot
      create  app/assets/stylesheets/_icons.scss

Access these new icons by creating a tag with the class icon-{{glyph}} where the {{glyph}} is the name of the svg you put in the icon folder.
For example, if you added a file called 'cars54' icon would look something like this:

<i class="icon-cars54"</i>

Now the font is adjustable to css 'font-size' and 'color'.

Save CSS and fonts to different locations

You can save generated fonts, CSS, and other files to different locations by
using fontcustom.yml. Font Custom can also read input vectors and templates
from different places.

Just edit the input and output YAML hashes and their corresponding keys.

Tweak font settings

By default, Font Custom assumes a square viewBox, 512 by 512, and 16 pica
points. Change font_design_size, font_em, font_ascent, font_descent,
and autowidth to suit your own needs.

Generate LESS, Stylus, and other text files

Custom templates give you the flexibility to generate just about anything you
want with Font Custom's output data.

Any non-SVG file in your input directory (or input:templates directory if you
set it in fontcustom.yml) will be available as a custom template to copy into
the output directory after compilation. You just need to specify the file name
under the templates hash.

Any embedded ruby in the templates will be processed, along with the following
helpers:

  • font_name
  • font_face: FontSpring's Bulletproof @Font-Face Syntax
  • glyph_selectors: comma-separated list of all icon CSS selectors
  • glyphs: all selectors and their codepoint assignments (.icon-example:before { content: "\f103"; })
  • @options: a hash of options used during compilation
  • @manifest: a hash of options, generated file paths, code points, and just about everything else Font Custom knows.
  • @font_path: the path from CSS to font files (without an extension)
  • @font_path_alt: if preprocessor_path was set, this is the modified path
  • pseudo_element: if css3 was set to true, then it will print ::before. Otherwise the PseudoElement will be :before

font_face accepts a hash that modifies the CSS url() function and the path of
the font files (font_face(url: "font-url", path: @font_path_alt)).


Licenses

Brought to you by @endtwist and @kaizau

主要指标

概览
名称与所有者FontCustom/fontcustom
主编程语言Ruby
编程语言Ruby (语言数: 4)
平台
许可证
所有者活动
创建于2012-10-08 02:14:42
推送于2023-03-08 19:00:37
最后一次提交2017-08-11 09:56:27
发布数28
最新版本名称v2.0.0 (发布于 )
第一版名称v0.0.2 (发布于 2012-11-26 09:08:49)
用户参与
星数3.3k
关注者数101
派生数423
提交数454
已启用问题?
问题数290
打开的问题数107
拉请求数50
打开的拉请求数24
关闭的拉请求数37
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?