I noticed that my font with 16px size is messed up somehow only on Windows
Here it is on Google Chrome macOS
Here it is on Google Chrome Windows 10
This is main font-face css in App.vue
#font-face {
font-family: "sukhumvit";
src: url("../public/fonts/sukhumvit/sukhumvit-text-webfont.eot");
src: url("../public/fonts/sukhumvit/sukhumvit-text-webfont.eot?#iefix")
format("embedded-opentype"),
url("../public/fonts/sukhumvit/sukhumvit-text-webfont.woff2")
format("woff2"),
url("../public/fonts/sukhumvit/sukhumvit-text-webfont.woff")
format("woff"),
url("../public/fonts/sukhumvit/sukhumvit-text-webfont.ttf")
format("truetype");
font-weight: 400;
font-style: normal;
}
#app {
font-family: "sukhumvit";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
overflow: hidden;
}
}
Related
In my project, I use font-icon.
I have defined icon-close in icon.styl file, here is core code:
#font-face {
font-family: 'sell-icon';
src: url('/src/common/fonts/sell-icon.eot?o23a15');
src: url('/src/common/fonts/sell-icon.eot?o23a15#iefix') format('embedded-opentype'),
url('/src/common/fonts/sell-icon.ttf?o23a15') format('truetype'),
url('/src/common/fonts/sell-icon.woff?o23a15') format('woff'),
url('/src/common/fonts/sell-icon.svg?o23a15#sell-icon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts
*/
font-family: 'sell-icon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-keyboard_arrow_right:before {
content: "\e900";
}
.icon-close:before {
content: "\e901";
}
.......
And now, I want to use it in head.vue file:
<div class="detail-close">
<i class="icon-close"></i>
</div>
<style lang="stylus" rel="stylesheet/stylus">
#import "../../common/stylus/mixin"
#import "../../common/stylus/icon.styl"
But I have got error:
Failed to decode downloaded font:
http://X.X.X.X:8080/src/common/fonts/sell-icon.ttf?o23a15
Who can help me?
tabs with remove icon(X) shows as white in desktop , when I opened the same view in phone /ipad icon(X) shows in red
Please advise
I change using FontAwesome icon.
:host /deep/ .nav-link .bs-remove-tab {
position: relative;
font-size: 0em;
}
:host /deep/ .nav-link .bs-remove-tab::after {
content: "\f00d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #F44336;
font-size: 13px;
// padding-right: 0.3em;
left: 0.3em;
position: relative;
top: 2px;
}
You can access the css component:
:host /deep/ .nav-link .bs-remove-tab {
background: blueviolet !important;
}
I just inherited an application and the less variable file is setup as follows.
#icon-font-path: "../fonts/";
#exampleFont: exampleFont, 'Helvetica Neue', Helvetica, Arial, sans- serif;
#font-face {
font-family: exampleFont;
src: url('#{icon-font-path}#{exampleFont}.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
compiled CSS
#font-face {
font-family: exampleFont;
src: url('../fonts/exampleFont, 'Helvetica Neue', Helvetica, Arial, sans-serif.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Does anyone know why the src url contains the url AND font family and when it is compiled it combines both and still works? I've never seen it done this way before.
src should be
src: url('#{icon-font-path}exampleFont.ttf') format('truetype');
In the current code it has #{exampleFont} which would expand to the value of the variable.
Here a working example on how to use a mixin for Fonts in LESS:
https://github.com/MarcoHengstenberg/helpCSS/blob/master/help.css#L528-L547
On line 533 you have to replace weight and style with actual values for your regular font (400, normal).
I am trying to disable my anchor tags from being underlined when hovered over. I have added text decoration: none; to my .scss file like so:
$font-family-serif: 'Nixie One';
$font-family-base: $font-family-serif;
#import "bootstrap";
//#import "bootstrap-sprockets";
//TB Navbar overrides to change the color scheme
$bgDefault : #ffffff;
$bgHighlight : #ffffff;
$colDefault : #8587f1;
$colHighlight : #4e5aff;
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
Also when I look at the web page, it seems to compute the rule correctly:
Where am I going wrong here?
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
a
{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
So apparently the issue was that I just had to specify the the a tag: a {text-decoration: none;} within my scss file instead of just setting it for the class.
In Less, it seems almost impossible to use #font-face selector. Less gives errors when I try to use
font-family: my_font
Here is how I try to use it:
#font-face {
font-family: my_font;
src: url('http://contest-bg.net/lg.ttf');
}
p {
font-family: my_font, "Lucida Grande", sans-serif;
}
There is simple escape in Less using ~"..." but can't come up with working code.
Had someone used it successfully?
Have you tried putting the font family name in single quotes? The following works just fine for me.
#font-face {
font-family: 'cblockbold';
src: url('assets/fonts/creabbb_-webfont.eot');
src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/creabbb_-webfont.woff') format('woff'),
url('assets/fonts/creabbb_-webfont.ttf') format('truetype'),
url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg');
font-weight: normal;
font-style: normal;
}
To use font as a mixin, try:
.ffbasic() {
font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif;
}
then within a style declaration:
.your-class {
font-size: 14px;
.ffbasic();
}
One other note to the voted answer above; make sure that your mixin does not have parenthesis so that it is parsed when compiled into CSS.
Full Example:
** In Your Variables LESS File:**
// Declare the path to your fonts that you can change in the variables less file
#path-fonts: '../fonts';
** In Your Mixins LESS File:**
.font-names
{
#font-face {
font-family: 'open-sans-light';
src: url('#{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'),
url('#{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'),
url('#{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'),
url('#{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg');
}
}
** In Your Nested Rules LESS File:**
#import 'your variables less file name';
#import 'your mixin less file name';
#font-face {
.font-names;
}
Note: That the ".font-names" definition does not have the () behind it.
I think it's because you are missing the font format. Which for ttf is truetype, if it's missing or incorrect the font might not be loaded.
#font-face {
font-family: "MyFont";
src: url("./my-font.ttf") format("truetype");
}
My LESS code:
#fontName: 'FontName';
#fontWeights: 'Light', 'Medium', 'SemiBold', 'Bold', 'ExtraBold';
#fontWeightsNum: 300, 400, 500, 600, 700;
.fontFace(#indexPrefix: 1) when (#indexPrefix =< length(#fontWeights)) {
#fontWeight: extract(#fontWeights, #indexPrefix);
#fontWeightNum: extract(#fontWeightsNum, #indexPrefix);
#fontFullName: "#{fontName}-#{fontWeight}";
#fileName: "../fonts/#{fontFullName}";
#font-face {
font-family: #fontName;
font-weight: #fontWeightNum;
font-style: normal;
font-display: swap;
src: local('#{fontFullName}'),
url('#{fileName}.woff2') format("woff2"),
url('#{fileName}.woff') format("woff");
}
.fontFace(#indexPrefix + 1);
}
.fontFace();
#f: '#{fontName}', "Helvetica Neue", sans-serif;
Get:
#font-face{
font-family:FontName;
font-weight:300;
font-style:normal;
font-display:swap;
src:local('FontName-Light'),
url(../fonts/FontName-Light.woff2) format("woff2"),
url(../fonts/FontName-Light.woff) format("woff")
}
x5
And you can use:
font: 300 16px #f;