Mac/iOS Corrupts Custom Icon Fonts in Firefox/Chrome - html

I have the bug that on Mac/iOS in Chrome and Firefox browser my custom icon font is suddenly cut off.
I created the font with icomoon.io because that actually worked quite well on different browsers so far.
The font loads without errors and the size is correct.
It is also not because there is a Div/Container ... over it the icons are on top.
Fun fact: If you change the fontsize to an enormous amount like 120px the Icons are fixed again
Is this a known bug, or is there a fix for it?
Example Img
Icon Call
<i class="ke-icon-basket"></i>
Applying the class
i[class^="ke-icon"], i[class^="ke-icon"] span {
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: KEIcons !important;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
}
Font initalization
#font-face{
font-display:swap;
font-family:KEIcons;
font-style:normal;
font-weight:400;
src:url(fonts/KEIcons/KEIcons.woff) format("woff"),url(fonts/KEIcons/KEIcons.woff2) format("woff2")
}
Steps already done:
Changed to all kinds of font type
Resized icons in font
Disabled Apaches default cache function and all of the pagespeed modification which are supervised by hetzner

Related

How should I use icon fonts in the TwinCAT HMI?

To replace the tedious effort of editing and saving copies of .svg files with customized colors and variants, I decided that it would be nice to try and work with modern icon libraries.
To that end, I have tried to implement Google's Material Icons library as a font, inside a TwinCAT HMI project. The result looks something like this:
Fonts/MaterialIcons-Regular.woff2 (locally hosted font file)
Fonts/Fonts.css contains:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2');
}
Themes/Base/BaseStyle.css contains the style definitions for the various classes
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}
/* Rules for using icons using custom colors */
.material-icons.orange600 { color: #FB8C00; }
This allows me to define a TcHmiHtmlHost, create an element, and voila!
<div id="material_icon_622" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-grid-row-index="2" data-tchmi-width="30" data-tchmi-height="30">
<span class="material-icons md-dark ">face</span>
</div>
However, I need to define and customize an HTML host for each time I would use a symbol this way...
What other ways have people tried to efficiently work with adding icons to their TwinCAT HMI? Is there an icon framework for TwinCAT that I am missing? Is customizing SVG files the way to go? Should I just use a modern web framework?
Thanks in advance.
We use SVG files as icons. This is flexible, and there are loads of icons available already.
The only thing that is irritating is that Beckhoff puts the SVG file in an tag as 'src'. That has the consequence that for every icon you should have it in a specific color if needed. This is the Beckhoff way (see the included images in Twincat HMI by Beckhoff). I want to use the fill property for SVG files, however that doesn't work. So I've implemented a 'hack' according to: How to transform black into any given color using only CSS filters

Display fonts in different browsers

There is a design drawn in Zepplin. There is a font
font-family: HelveticaNeue;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #888888;
But for some reason in the browser it is displayed much thinner than in design. What could be the problem?
In the picture the design below the browser at the top:
here you hape put the font-weight property just put the value to 600 like below
font-weight: 600;
the reason behind that is when we put font-weight below 600 it shows the text normal, while if we put the font-weight between 600-900 it shows the weighted text
you can use font-weight: bold :- if you need text be look like bold or else you can give some value 500-900 to match the design in the zeplin.
hope it will work fine in all the browsers if give value as "bold".
#Alexandr Kizilow some fonts varies browser to browser. Use below:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
if not then make font-weight:500 (font-weight also varies from font to font)according to font you are using, it will make font bold.

Clean Text Rendering

I am using "open sans" font in my website. But it render unclear and dirty edges font. IMAGE BELOW
But i see on some another websites that they are using same open sans font but its very clean and retina ready Image below
Why my text edges are untidy and unclean?
ADDITIONAL: I tried disable the stylesheet codes and text rendering is clear and retina ready. But what i am missing?
I believe I know how to solve this...add this to your css:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
I add that to ALL my web projects now. It makes the fonts looks much more crisp :)
Demo
Also, when using web fonts, it's a good idea to deliberately specify the font weight.
h1 {
font-family: 'Open Sans';
font-weight: 300; /* 300 is the "light" version of the font, 400 would be "normal" */
}

Padding issues (?) with custom icon font. Example below

I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.
For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: http://i.imgur.com/RwOKWLp.png
I have set the "background-color" to yellow to highlight my problem.
Here is the HTML for one icon:
<div class="vicon" aria-hidden="true" data-icon=""></div>
Here is the CSS that I am currently working with:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
#font-face code:
#font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone have any idea why this might be happening?
The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)
It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.
Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.

CFF font with serrated

I'm using a CFF font on my page, but it's showing serrated in the browser.
Here you can see how I'm using it: JSfiddle
HTML
<p>Hello everyb#dy!</p>
CSS
body{
font-size: 10px;
}
#font-face {
font-family: Planer_ExtraLight;
src: url('http://www.digitalpersone.com.br/projetos/fonts/planer_extralight.svg#Planer_ExtraLight') format('svg'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.otf'),
url('http://www.digitalpersone.com.br/projetos/fonts/Planer_ExtraLight.eot');
}
p{
font-family: Planer_ExtraLight;
font-size: 4em;
}
Anyone can help me with it?
This should work: http://jsfiddle.net/Allendar/aKGam/1/
p {
font-family: Planer_ExtraLight;
font-size: 4em;
font-smooth: subpixel-antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}
Result
Update
Check the MDN. It seems to not work in most browsers. You might try to look into similar functions of -webkit-font-smoothing in other browsers to add to your styling.
The increase in quality I'm seeing in Safari is humongous tho!
Update 2
I found this might work in Firefox;
browser.display.auto_quality_min_font_size = 0; // default = 20
.. where lower means better quality and slower rendering and vice versa.
Update 3
This is interesting too (https://developer.mozilla.org/en-US/docs/CSS/text-rendering);
text-rendering: geometricPrecision;