7studio / bichoco-font-faces Goto Github PK
View Code? Open in Web Editor NEWA Sass module helping you to create easily one or more @font-face rules
A Sass module helping you to create easily one or more @font-face rules
Currently, the BICHOCO Font Faces module does not support the SVG Font but it is not a bug it is rather a will.
In fact, in order to use an SVG font in the @font-face
rule, its path needs an extra info (e.g.: url('../fonts/asap/bold.svg#idFontName) format('svg')
).
This extra info is embodied by a hash after the file name which relates to the value of id
attribute on the <font>
element in your SVG file (e.g.: <font id="AsapBold" horiz-adv-x="1095">
).
The reason for this is that multiple fonts can be embedded in a SVG document and therefore an unique identifier is required.
Finaly, even if there is only one font declared in the document, if we don't include this hash, the required SVG Font will not work.
The problem is simple: without generating our font files, we cannot define this hash as we would like. Unfortunately the SVG ID is not necessarily (in fact, never) the same than the font name or file name with the common font generators.
Here is an example with the webfont generator of Font Squirrel and the Asap font:
asap-italic.svg
-> <font id="asapitalic" ... >
asap-bold.svg
-> <font id="asapbold" ... >
asap-bolditalic.svg
-> <font id="asapbold_italic" ... >
I found two solutions to use SVG font format with the module:
Pros:
@include
directivesCons:
<FamilyName><Weight><Style>
)$family-name
parameter in the font-face
mixin// Built @font-face rule
// @mixin: font-face
// @arg {string|list} $family-name The font-family descriptor value and optionally an SVG ID to use
// ...
// Basic usage
@include font-face('Asap', 'asap', normal, 700);
// With SVG font format support
@include font-face(('Asap', '#asapbold'), 'asap', normal, 700);
Pros:
id
attribute on the <font>
elementCons:
font-faces
mixin in an understandable way. IMHO, it is too complex and would not make sense if the SVG ID was attached to variants/stylesI think these files below are unavoidable in a repository nowadays:
Now, I don't know if it's important to add also the .travis.yml
file or not.
Your feedbacks are welcome.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.