I'm writing a Pure AS3 app, embedding a font using the Embed metatag like so:
[Embed(source="assets/fonts.swf", fontName="AlternateGothic No2")]
public static const ALTERNATE_GOTHIC_2:Class;
This has always worked for me, but Alternate Gothic No. 2 gives me issues. In Flash, the font is labeled as AlternateGothic and the style is No2. I typically combine these with a space in between as the fontName, but it's not working.
The font is Postscript Type 1, so I can't embed the file and fontFamily, unless I spend $100+ on a font converter.
I also tried creating a font symbol, but that didn't work either. Any ideas?
FontExplorerX has the font labeled as AlternateGothic-No2, so I tried that and it worked.
Related
How can I use for example the glyph name "rcaron.terminal" which has no Unicode value in HTML? or any other such case? Is it even possible? I think it must be surely but I got no clue. It's easy for regular letters like the glyph "ß" where I would just type "ß" and get that character or "ß" (same result) but for glyphs without any Unicode value I don't know what I'm supposed to do...? I've tried also "&rcaron.terminal" but nothing, where as something like "&hearts" would work giving a heart glyph of god knows what font, probably Arial I dunno.
Do I need to use state some specific encoding aside from ANSI in my html document?
ie. < meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8" > or something... like Im really lost lol
All I found on the net was this http://text-symbols.com/html/unicode/ but I cant find any more info so I came here.
Please help! Thanks! :)
There are no glyphs in HTML which do not have a Unicode name.
If you really need to have a glyph which is not representable using regular Unicode, you might want to create a font of your own and define the glyphs you need in the private use area; but obviously, then, your HTML will be impossible to use without that particular font.
Background links:
http://arstechnica.com/information-technology/2008/10/embedded-web-fonts/
http://www.font-face.com/
Practical guides:
http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/
http://blogs.atlassian.com/2013/07/how-to-make-an-icon-font-the-8-step-guide/
First navigate to this site: https://fontdrop.info/#/?darkmode=true
Upload the file with your font
Click on the Ligatures tab.
Every Glyph should have a Components field
copy the components for the character you want to use
paste that string into HTML
You don't need any & or #, it just detects the string and converts it.
I'm trying to generate a pdf from html by using Hiqpdf. As they say in the website: http://www.hiqpdf.com/documentation/html/037cb13e-febe-4d08-a90c-a08bbd5a4348.htm this dll supports fonts embedding. However, I'm using the following fonts stored in my computer and it doesn't work.
#font-face {
font-style:normal;
font-weight:normal;
font-family:f2generic;
src:url('C:/Users/myuser/AppData/Local/Temp/f2generic.otf') format("opentype");}
I don't know is it is something wrong with the path (as it must be absolute path or the format of the font). In html format i can display the fonts right.
I checked property htmlToPdfConverter.Document.FontEmbedding and it is true, so I don't know why it doesn't work.
Thanks in advance.
You should try to use fully qualified URLs for resources like file:///C:/Users/myuser/AppData/Local/Temp/f2generic.otf
In the noble effort to re-invent every wheel, our company has recently rolled our own custom web-based e-mail app, of which I was the primary designer.
One thing I've noticed is that smileys coming in from MS Outlook-based e-mails (sent from third parties) are not appearing correctly. Example: A happy face just displays a J
The HTML of the inbound message comes in like this:
<span style="...;font-family:Wingdings;...">J</span>
I know that Firefox and Chrome do not support the Wingdings font because it is non-standard. However, I am tasked with coming up with a fix.
Is there a good way to either 1) force the browser to load and use Wingdings or 2) otherwise convert the J to a smiley?
I'd rather not do anything crazy like try some wingdings-detection-regex - or even worse, parse the DOM - just to get some stupid emoticons working. Maybe there is already some library out there that already handles this?
For what it's worth, GMail seems to not 'fix' this problem either. iOS doesn't in the message view, but puzzlingly does fix it in the inbox view (replaces the J w/ emoji)
EDIT
To clarify, this question is regarding inbound messages from third parties. Outlook, by default, autocorrects ":)" to the Wingdings smiley. There's nothing I can do to prevent this coming in. What I need is a solution to correct for this.
EDIT 2
Again, the app itself is a web based e-mail client (Gmail, etc.). E-mails go in to here, NOT to users' individual Outlook/phones/other e-mail clients. It only goes into the web app.
To avoid having to parse the HTML or manipulating the DOM, a simple solution would be to use CSS3 web fonts by linking the Wingdings font-family to a copy of the Wingdings font file on your server:
<style>
#font-face {
font-family: Wingdings;
src: url(link_to_wingdings_font_file.ttf);
}
</style>
However, a license is required for this approach.
You could embed the SWEC (Symbola-based Wingdings Emoticons Compatibility) font: https://drive.google.com/open?id=0BwDrnPQfa-aMOEx0bEZCQUNrSGs
It provides basic compatibility with Wingdings emoticons. (In Wingdings, "J" represents a smile, "K" represents a lack of expression, and "L" represents a frown.) Background: certain versions of Microsoft e-mail clients still in use change user-typed expressions such as ":)", ":|", and ":(" into "J", "K", and "L", respectively, and then specify Wingdings as the font family; recipients on systems which do not include a Wingdings-compatible font are not able to see the intended emoticons, which can cause confusion.
You need to manually substitute it prior to sending the email as you have no control over what fonts the reader has installed. You also can't include anything outside bland old html and css (unless you want to mess with VML)
First I would try running your wingding through a html converter to see if there is a html code for it.
Besides that, you could try a webfont wingdings equivalent, however there are issues with Outlook playing nice when webfonts are imported in email (ignores your font stack, falling back to Times New Roman).
Besides that, all that is left is ZephyrusDigital's suggestions of using an image or :).
Against my better judgement I have decided to go for the quick hack and just use a regular expression. Here it is for anyone else that runs into the same problem:
$html = preg_replace('/\<SPAN*?(Wingdings)*?[^\>]*\>J(\<o\:p\>\<\/o\:p\>)*\<\/SPAN\>/i', ' :) ', $html);
use :)
kidding!
why not save the wingdings smiley in photoshop as a png, or make another custom one? you could use <img src="http://something.com/images/smiley.png" style="display:inline-block;"/> and it won't look weird in a text block as long as it isn't taller than your line-height.
I'm trying to add my own font to my website I have checked out quite a few stackoverflow articles many seem to be browser specific or path issues. I cant seem to get my font to display on any browser, anyone know what's up?
#font-face {
font-family: "Helvetica";
src: url('http://spawnasite.co.uk/Helvetica-Condensed-Light-Light.ttf') format("truetype");
}
h1{
text-align: center;
text-transform:uppercase;
color:#232323;
font-size: 24px;
font-family: "Helvetica", sans-serif;
}
Js Fiddle here http://jsfiddle.net/Gz26Q/
My guess here is that the font you're referencing is protected.
Not all font foundries, especially one like Helvetica, allow their fonts to be embedded. They have code within the font to prevent this.
You could still use the font on your computer, but not embed it within another application or document that doesn't have the font installed.
As a reminder from what has been mentioned before:
Change the name of your custom font-family from "Helvetica" to something else in order to avoid overriding default naming conventions.
Use multiple types of fonts for backups.
Additionally,
I highly recommend looking at FontSquirrel -- some fonts even have their own webfont kit pre-made for you to use out of the box.
If you try to load fonts in Chrome and want better rendering -- be sure to put the SVG on the top of the declaration. See here for more information.
You are trying to override an existing font, call it myHelvetica
Use others formats: eot, wot.
See these links:
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
http://caniuse.com/ttf
The basic problem is very simple: the URL of the font resource is wrong. An attempt to fetch http://spawnasite.co.uk/Helvetica-Condensed-Light-Light.ttf results in 404 Not Found.
I am developing a theory music web page. In music notation there are some symbols like "flat" and "sharp" that can be achieved with standar characters like "b" and "#", but the final output is very unpleasant.
I have instaled special fonts to use these (and many other) music symbols, but obviously they are not installed in the vast majority of computers.
1.- Is there a way to safely use this fonts?
2.- If so, what HTML tag should I use? Will it be Ok to use the span Tag with a Class="MusicNotation" inside a p Tag to change the font of these music symbols via CSS? Is there a better ( more standar ) way to do this?
I provide an example of what I will do
This is the HTML
<p>This is a <spam class="MusicNotation">G#</spam>chord</p>
And this is the CSS:
#MusicNotation { font-family: Repreise }
This will help you:
There are also HTML code alternatives for making music note symbols. There are officially 7 music note symbols that can be displayed through HTML codes. Just copy and paste or type these following codes. Numbers should always be preceded by the ampersand and sharp sign, and should end with a semi-colon. For the quarter music note, you should type ♩ and it should look like this: ♩.
To make an eighth music note, type ♪ and it should look like this: ♪.
To make a beamed eighth music note, type ♫ and it should look like this: ♫.
To make a beamed sixteenth music note, type ♬ and it should look like this: ♬
To make a music flat sign, type ♭ and it should look like this: ♭
To make a music natural sign, type ♮ and it should look like this: ♮
To make a music sharp sign, type ♯ and it should look like this: ♯.
http://www.howtodothings.com/hobbies/how-to-write-music-note-code
Be sure to use <meta charset="utf-8">
Don't use a font-family that is unlikely to be installed on the target machines.
I'm assuming those symbols are available in Unicode somehwere, but there are many fonts that won't contain a full Unicode set and they'll show up as little boxes or worse.
#font-face is the new technology for embedding a font into a page, but you'll have to do some grunt work to get it working.
If you are open on using Flash, you can use sIFR. Take a look here: http://www.mikeindustries.com/blog/sifr
You could use this library: http://musicengravingcontrols.com/
It's open source and it has two web implementations (for Asp.Net MVC and ASP.NET Core) and one experimental implementation for WebAssembly (using Blazor).
Some article on CodeProject: https://www.codeproject.com/Articles/1252423/Music-Notation-in-NET