Wingdings font in FF and Chrome - javascript

I would like to use font Wingdings in my app,
it is working well in IE, but in FF and Chrome instead of chars I see a latter.
How to use this font in FF in correct way ?
.changehistorybtn {
cursor: pointer;
color: hsl(215, 47%, 57%);
font-family: Wingdings 3;
}

Try this:
font-family: "Wingdings 3";

Related

Is there a way to animate the gradients of a font?

Let’s say I would like to use this font:
#font-face {
src: url("https://cdn.glitch.global/f206356a-29f3-4941-a91f-d78ba238df98/Abelone-FREE.otf?v=1650648293770") format("opentype");
font-family: "Abelone";
}
* {
font-family: "Abelone";
font-size: 80px;
}
Hello, world.
Is there a way to animate the included gradients with CSS or JavaScript? If not, are there alternative ways to do something similar using just SVG or clipping masks, for example?
Important: Chrome doesn’t show the gradients. Please use Firefox to view them.
Edit: Opentype Svg font display/rendering
Colored Opentype Svg fonts supported (firefox, edge, ios safari)
Opentype Svg font features not supported (e.g chrome)
About used font: ColorFontWeek – Abelone
It's possible with an CSS filter.
HTML Code:
<div class=animated>Does it work?</div>
CSS:
div.animated {
filter: hue-rotate(50deg);
}
This should change the colors.

Safari not honoring CSS transform-origin, `transform-box: fill-box` not helping

I'm using transform: scale(0.8, 1) to squeeze the width of the two-digit numbers on this clock face. Without also using transform-origin, the numbers slip out of their proper places.
The transform-origin I'm using works fine on Chrome and Firefox, but makes no difference on Safari. Here's how it should look:
Here's what Safari shows:
Everything I've found so far about this issue says that transform-box: fill-box fixes this problem with Safari, but for me it's making no difference. Some older solutions have to do with using the -webkit- prefix, but that doesn't help, and should only be an issue for much older versions of Safari anyway.
The styling is applied in JavaScript, as these elements are created dynamically:
text2.setAttribute('x', x2.toString());
text2.setAttribute('y', y2.toString());
text2.setAttribute('dy', '3.5');
text2.classList.add('clock-face');
text2.textContent = h.toString();
if (h > 9) {
text2.style.transformBox = 'fill-box';
text2.style.transform = 'scale(0.8, 1)';
text2.style.transformOrigin = [10, 19, 28][h - 10] + '%';
}
I'm also trying to enforce the issue via stylesheet, to no avail:
.clock-face {
font-family: $clock-face-font;
font-size: 10px;
letter-spacing: -0.05em;
text-anchor: middle;
fill: white;
transform-box: fill-box !important;
user-select: none;
}
The rest of these styles are definitely being applied, so it's not like the CSS is being ignored in general. The Web Inspector confirms the transform-box has been applied:
Any suggestions about how to fix this problem would be greatly appreciated.
This isn't ideal, and I'd still like to know what's going on with transform-origin, but just solving the problem differently by using the dx attribute instead of transform-origin works with Safari and the other browsers as well.
if (h > 9) {
text2.style.transform = 'scale(0.8, 1)';
text2.setAttribute('dx', ['4', '8', '12.5'][h - 10]);
}

Font size in html using css

in my project I need to right some big text, so in my css file I wrote:
#wrong_answer
{
color: red;
font-size: 30;
font-weight: bold;
}
and in my js file:
function wrong_answer()
{
$("body").append("<p id='wrong_answer'>Is not correct</p>");
};
and finaly I got red text, but very-very small and if I change font-size the size of text doesnt changes.
so question is why cant I change font-size?
30 what? 30px, 30pt, 30%, 30em? You have an invalid property value there.
When using jQuery you can specify just an integer but that's because jQuery treats integers like pixel values, e.g.:
//this will work
$([selection]).css({ fontSize : 30 });
Here are some great docs for font-size: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
UPDATE
You can use your developer tools (Chrome/Firefox/Safari for sure) to inspect the CSS associated with an element. When an invalid property value is encountered, these developer tools will alert you to the fact.
You need to specify the "unit of size" . . .
font-size: 30px;
The CSS declaration font-size: 30 is invalid and ignored by conforming browsers. If you mean pixels, you need to say that:
font-size: 30px
Read this page for better understanding about fonts.
http://www.w3schools.com/css/css_font.asp
Should be font-size: 30px or something similar. You need to specify the unit type.

How to change font style in App?

I am currently developing an app using VS 2012 in HTML/JavaScript Platform. Now, I need to know how to change the font style of the App?
For a Windows Store app written using HTML/Javascript, you can set the global font family / style / weight in the file /css/default.css by setting a property in the #contenthost declaration.
for example...
#contenthost {
height: 100%;
width: 100%;
font-family: 'Copperplate Gothic Light';
font-weight: bold;
font-style: oblique;
}
would set your global UI font to Copperplate Gothic Light in bold with a style of oblique.
NOTE : I normally use XAML/C# so this may not be the best way to achieve this behaviour, but it does work.
See -
Embed / use custom font in Windows 8 Store apps

font-family Verdana-Bold not supported in Firefox

If I set the font-family to Verdana-Bold, it doesn't work in FF (version 18) but Chrome (version 24) is fine.
If I change the font-family to Verdana, it works in both browsers.
Similarly, CourierNewPS-BoldMT, doesn't work, but Courier does.
Does anyone know of a generic solution to solve this? like a JS or a CSS technique that could convert the fonts specific to the browser?
http://jsfiddle.net/skUxK/4/
Here's the description of the use case:
I have a HTML5 app, that also has a equivalent windows desktop version, a mac app and a iOS and android app.
All these apps can make changes to a text, and then store those in a XML file.This file can be then be loaded any app.
If you just want to use the bold version of a font, use the font-weight property.
font-family: verdana;
font-weight: bold;
Use #font-face so that every single browser can display the exact same font.
For more information: http://www.css3.info/preview/web-fonts-with-font-face/
#font-face {
font-family: MyFont;
src: url('mybeautifulfont.otf');
}
body{
font-family: 'MyFont', 'Verdana-Bold', 'Verdana';
}
If you only just want bold text, then:
body{
font-family: 'Verdana-Bold', 'Verdana';
font-weight: bold;
}
As far as I can tell, bolded Verdana displays fine on Firefox.

Categories

Resources