Menu
I need to get the following CSS output from Stylus (bit of a backward way to do it but Stylus will make so many other parts of this project easier). I've tried a fair few things but can't get it to compile, and when it says that it has compiled nothing shows for this part of the output. I haven't had any joy implementing stylus-font-face - npm as the documentation there doesn't seem to show an example of the Stylus needed. Here's the output I need, and any help is really appreciated.
@font-face {
font-family:'apercu-regular';
src: url('../fonts/apercu-regular/Apercu_gdi.eot');
src: url('../fonts/apercu-regular/Apercu_gdi.eot?#iefix') format('embedded-opentype'),
url('../fonts/apercu-regular/Apercu_gdi.woff') format('woff'),
url('../fonts/apercu-regular/Apercu_gdi.ttf') format('truetype'),
url('../fonts/apercu-regular/Apercu_gdi.svg#apercu-regular') format('svg');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+0020-25CA;
}
418
In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property: The @font-face rule is supported in Edge, Chrome, Firefox, Safari, and Opera.
While Stylus don’t support every possible CSS-like syntax, it can understand even such code:
So although not every plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus’ other powerful features.
There are a few caveats to this rule: since the two styles may be mixed and matched, some indentation rules still apply. So although not every plain-CSS stylesheet will work with zero modification, this feature allows those who prefer CSS syntax to continue doing so while leveraging Stylus’ other powerful features.
I've worked out how to get it to compile correctly in minimal syntax Stylus (I wanted to use Jeet, Boy and Rupture so I had to do it that way). Hope this helps someone.
@font-face
font-family 'apercu-regular'
src url('../fonts/apercu-regular/Apercu_gdi.eot')
src url('../fonts/apercu-regular/Apercu_gdi.eot?#iefix') format('embedded-opentype'),url('../fonts/apercu-regular/Apercu_gdi.woff') format('woff'),url('../fonts/apercu-regular/Apercu_gdi.ttf') format('truetype'),url('../fonts/apercu-regular/Apercu_gdi.svg#apercu-regular') format('svg')
font-weight 400
font-style normal
font-stretch normal`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With