I need to dynamically make an SVG in my web app and to do so I'm making an SVG in Corel and modifying that template file in Node.js as needed. This works except for fonts. For this project I need my text as text, not curves, because I need to modify it. I'm using Century Gothic. I was using embedded fonts, but apparently those are no longer supported by Chrome and Edge. However, if I used linked fonts the file renders improperly if the user doesn't have the font installed. In either of these error cases the browser defaults to Times New Roman. What can I do to get Century Gothic to render in all browsers in an SVG?
You'll need a web font. Century Gothic is not freely available, so you have to either buy a license, or use an open source alternative. Muli seems to be considered as a good alternative. For how to use an external font provider, see this.
Related
I was browsing SVG fonts in MDN, where it is mentioned that <font-face>, <missing-glyph>, <hkern> and <vkern> are depreciated. Only <glyph> is not depreciated. It does not mention anything about a recommended way of specifying the font face properties.
The W3C SVG recommendation also does not say anything about an alternative way of specifying SVG fonts, apart from noting that everything in the <font-face> can be done equivalently in CSS. It does not provide any alternative for <hkern> or <vkern>. I intend to create a standalone SVG file, not to be modified by the site CSS, so I would like to keep the whole font definition in the SVG.
So, what is this obscure new way of specifying SVG fonts?
"SVG fonts" as a data file that uses SVG markup to define a font resource has been deprecated; it turned out to be a bad idea, and ended up not addressing the issues that typography on the web needed addressing. It was added in SVG 1.1 but removed again in SVG 2.0, and almost all browsers that did end up adding support for it removed that support again since.
Instead, all browsers now support "webfonts": regular OpenType fonts packed for the web using the "Web Open Font Format", aka WOFF/WOFF2, based on the OpenType format, which supports several different outline types:
TrueType (quadratic curves and compound glyphs, often with ttf extension, but the extension is literally irrelevant)
Type2 in CFF/CFF2 (cubic curves and arbitrary subroutines, often with otf extension, but again: the extension is wholly irrelevant)
Embedded bitmaps (yes, OpenType fonts can indeed be true bitmap fonts, with as many different bitmaps as necessary to cover as many pixel sizes as necessary)
SVG (that might be surprising, but SVG is the exact same kind of vector graphics language as TT and CFF/CFF2 are, so it made sense to allow glyph outline data to be specified using SVG as well, particularly for fonts that need explicit colour palettes, like emoji fonts)
So if you absolutely need to keep your SVG data around, then make yourself an OpenType-with-SVG-outlines font, and then pack that for the web as a modern WOFF2 (or older WOFF) and you're good to go. There are plenty of online tools to do that for you, but you can also just use something like the open source FontForge application if you want a font that only includes what you need, instead of what online tools foist into them.
I was searching through the net and couldn't find the exact answer.
How do browsers get the exact .ttf file for a font family specified in the css? Does it already have it in its code or does it pick from the user's system. I guess we can always specify the custom font files using the #font-face but what about the normal general fonts like arial etc?
The process is obviously different between browsers and operating systems, but in short, browsers pick the font from the system, and if it’s not installed, the font will be replaced with another similar font.
I noticed that math.SE uses mathjax and has equations in a blue color.
Notice how the infinity sign is colored aswell.
However one would expect this to remain black because - as mentioned here: How to change equations color in MathJax - those symbols are in fact images who's color is not effected. Like so:
So, how do they change the color of those images as well? I thought it was impossible.
MathJax should use image mode only in a few rare cases these days. The main one is when you use Firefox to view local files (via a file:// url) and MathJax is not in the same directory as the HTML file being viewed. In this case, Firefox's same-origin policy considers MathJax to be in a separate domain, and so fails to be able to access the web-based fonts since it considers that to be cross-domain access. So MathJax uses image fonts as a fallback because it can't use web-based fonts. I'm guessing that is what is happening for you.
Math.SE doesn't have that problem since it is not a file:// url and Firefox doesn't have trouble recognizing what domain is what, so you get actual web-based fonts and not images and they can be colored properly (unlike the images). Math.SE doesn't have to do anything special to make that happen, and you are not seeing colored images, but actual fonts. That is the difference from your uncolored examples.
The solution for the Firefox local-file problem is to install the STIX fonts, or MathJax's own OTF fonts, in your system's fonts folder. You can find the MathJax fonts in the MathaJax/fonts/HTML-CSS/TeX/otf directory of the MathJax distribution that you have installed locally. If these are available as actual fonts on your system, MathJax won't have to use web-based versions, and so it can avoid the Firefox issue with the same-origin policy. This will also speed up any page using MathJax anywhere (like Math.SE) since it won't have to download the fonts over the web.
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6
I am investigating the usage of SVG fonts in #font-face declaration. So far, only Safari 4 and Opera 10 seem to support it. Firefox 3.5 does not support it but there is a bug report but no fix has been supplied yet (though there are patches).
I am wondering, with #font-face support in major browsers, what is the advantage of using SVG font format in lieu of TTF/OTF/EOT formats? The only advantage I can glean from the discussion linked above was that you can add your own missing gylphs to fonts that do not support them yet.
Is there any other reason to specify SVG fonts in CSS?
It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's #font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.
The W3C states these advantages:
One disadvantage to the WebFont facility to date is that specifications such as [CSS2] do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a 'text' element which references this font.
But the point of a common format doesn't really count because of the lacking browser support.
svg webfonts cannot work within an offline webapp. You can see an example here: http://straathof.acadnet.ca/beta2.2 Save this file to an idevice homepage, turn on airplane mode and open it. The svg fonts and the naming system used cause the font url to fail.
hopefully Apple fixes that soon.