Develop Reference

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.

how to edit the subtitle of YouTube with chrome extension

i want to edit the font style of youtube videos
i saw in inspect mode of youtube.com that a span tag with ytp-caption-segment wrappes the text file of subtitle.so i use below code to capture this element:
var subtitle=document.getElementsByClassName('ytp-caption-segment');
but it always returns undefined,so i can not get the other attributes of it?
what can i do?
i think the reason is subtitle appears 1 sec after starting of video,so the visibility or display of it maybe none.any idea?

The span.ytp-caption-segment element is not a persistent part of the video player, it exists in the DOM only when you see a line of subtitle displayed. When the subtitle disappears, the element is removed from the DOM and it's created again with the next subtitle line.
So basically you have two strategies:
1. Insert a CSS rule for .ytp-caption-segment
This is the simplest way but unfortunately this won't work perfectly in this case because Youtube generates a lot of inline style rules into ytp-caption-element, and that cannot be overwritten from CSS.
These are the inline styles used by Youtube (at least for currently):
display: inline-block;
white-space: pre-wrap;
background: rgba(8, 8, 8, 0.75);
font-size: 20.7556px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
font-family: "YouTube Noto", Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, "PT Sans Caption", sans-serif;
These are mostly the parameters you can set in Youtube UI (subtitle options).
CSS still can be used in limited ways, depending on your goal. For example if you want to make bigger fonts, you can use 'transform: scale(2);' instead of the font-size (the transform property is not overwritten with inline CSS).
2. Rewrite the .ytp-caption-segment element
If you want full control, you have to delete the style attribute from ytp-caption-segment or rewrite with your own style. This is not trivial, I describe the main steps:
Insert a CSS rule which hides the subtitle so when a new line is created by the player, it won't appear immediately on the screen. (This could be done with transform or opacity rules.)
Listen for any new lines! (Using a MutationObserver is the preferred way, but a 100msec polling will work also as an easy hack.)
When you got the line, rewrite it's style attribute to your preferred style.
Don't forget to override the CSS rule from point 1. used for hiding the new line! It's easy, as you rewrite the style attribute anyway.
I can create a code snippet for this if you clarify exactly what do you want to change on the subtitle.

How do I vertically fill a container with uppercase text using JS/CSS?

I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.

line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )

Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};

Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.

So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.

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.

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.