I am editing font with fontforge font editor everything is good but in
ligature when i want to make multi word ligature (space between it) don't work on firefox and opera ,it will work with word pad and notepad.
is this bug or limit?
what should i do to solve problem?
note:i am using #font-face css syntax to import font and font is ttf.
Ligature making is an optional feature in an OpenType font. Examples of ligatures are the glued together sets of letters like, fi, ff, fl, ffi, ffl. A common font that has ligatures is Calibri that came as the default font in Microsoft Office 2007.
The font has a lookup table that goes like this:
f i -> fi
f l -> fl
f f -> ff
ff i -> ffi
ff l -> ffl
As you type the letters on the left hand side of the equation, the ligatures shown on right go and replace the currently displayed character (whether a single letter or an already formed ligature). Type 'difficult' inside Notepad using Calibri in some large size to see this happen. Notice that a ligature has multiple cursor positions inside it. You can stop automatic ligature formation by intervening the hidden character ZWNJ (Zero Width non-Joiner, u200C, HTML-‌) between letters.
Firefox 4 forms ligatures without the aid of CSS / SVG. MS Word can do ligatures starting from version 2010 but it needs to be enabled under Advanced tab, AbiWord (freeware) does also support it.
Check out this web site (use Firefox or Safari) that uses ligature feature to show a complex script on top of a transliterated text.
This smartfont has 400 odd ligatures that Firefox and Safari display without effort even after downloading the font.
A concrete example would be helpful, as this question is very unclear.
I assume that the issue is that you are attempting to access ligature features that are not part of the default for the font (i.e. it must be turned on as an opentype feature). CSS does not provide a way to specify opentype features to activate. Sorry.
If it is a logo, or similar, you could simply create the text as an image, either in something like png, or as an SVG.
For a short paragraph, SVG again might be suitable.
If not, then maybe there is a font that supports the appropriate ligature by default.
There's no way to make a "multi-word ligature" work in Firefox; it does not support ligatures (or other types of OpenType rule, such as contextual alternates) across inter-word spaces.
This is a fairly common limitation, actually; the same is true of XeTeX, for example. Inter-word spaces are not treated in the same way as normal printable characters by many text-layout systems, and so the OpenType lookups will not match in the way you expect.
Related
I cannot get Chrome on OSX to print emoji, is there any css trick or other?
Here are 2 emoji: 👍🇦🇹
When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.
Here is a screenshot of the print preview of this page on Chrome:
After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.
There is, however, the option to work around the issue by not using a font.
You can use a vector image like SVG to have the same kind of scaling capabilities as a font:
SVG for 👍THUMBS UP SIGN Unicode character
SVG for 🇦 REGIONAL INDICATOR SYMBOL LETTER A Unicode character
SVG for 🇹 REGIONAL INDICATOR SYMBOL LETTER T Unicode character
SVG for Thumbs up sign
SVG for Austrian flag
Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.
With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (👍):
http://www.fileformat.info/info/unicode/char/1f44d
It'll be the only SVG link on the page, so you could do this in JS:
var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;
That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. #pandawan's answer suggesting twemoji looks promising.
Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.
This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).
If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.
I've been integrating with a webfont in Brackets (eot, ttf, woff) and can't seem to get right of the old style numerals using
.lnum {
-moz-font-feature-settings:"lnum" 1;
-moz-font-feature-settings:"lnum=1";
-ms-font-feature-settings:"lnum" 1;
-o-font-feature-settings:"lnum" 1;
-webkit-font-feature-settings:"lnum" 1;
font-feature-settings:"lnum" 1;
}
I'm starting to wonder if the font I'm using even has normal numerals as I've double checked everything a bunch of times. Is there a way to check all the special characters contained in a webfont and possibly to call the numerals through a special character code?
Your rule with font-feature-settings and its vendor-prefixed variants works as such (the syntax with the value "lnum=1" is outdated but does not really disturb here), if the font used has lining figures. In a Windows system, you can check that it works (in modern browsers) by setting font to Constantia, which has old style numbers by default and lining figures selectable with font feature settings.
You can use the free DTL OTMaster Light program to inspect a .ttf font to see whether it contains lining figures (select “Tools”, “'GPOS'/'GSUB' Table Viewer”, select “'GSUB' Table” in “Layout Table” dropdown and then look for “lnum” in the “Feature” dropdown).
It is quite possible that in conversions from one font format to another (e.g. from .ttf to .woff), font features are lost, depending on the conversion software. When using the FontSquirrel WebFont generator, select “EXPERT” mode and check “Keep All Features” or list the features you want to keep, in “OpenType Features:”. If this fails to preserve the feature you need and if you wish to use e.g. only lining figures from a font, try the “Opentype Flattening:” option.
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
This week we stumbled upon a rather odd bug in IE7 (surprise, surprise) when embedding a EOT font file using the #font-face construct.
To save on bandwidth, we often edit out sets of characters from a font that we know will not be used on a site. In this particular instance, we were using this font for headers that were all composed in title case, but displayed in uppercase using the text-transform property. Logically, we saved all our font files with only the uppercase characters, as we simply don’t use the lowercase.
The site rendered perfectly in every browser (including IE6 and IE8) that supported the #font-face construct, with the notable exception of IE7. IE7 only displayed the first character of each word in the proper font — the rest of the characters were displaying in the browsers default font.
Scratching our heads, we finally figured out that since the headers were actually written as title case (and therefore contained lowercase characters), even though the text-transform property was deployed and characters were appearing in uppercase, IE7 required the lowercase letters to exist in the EOT file to display the uppercase characters. (Intuitive, isn’t it?)
The simple fix was the rebuild the EOT file with both upper and lowercase glyphs, even though the lowercase characters are never used.
Problem online: http://www.testdomeinnaam.nl/mike/
How can I fix this properly? (i.e. make IE7 render the uppercase characters without having to include lowercase glyphs in the font.)
Thanks!
I think you already have the best fix - just include both uppercase and lowercase glyphs in your .eot.
Your server is using HTTP compression.
The current .eot is 22.62 KB, and it's compressed down to 13.87 KB.
Even if adding the uppercase glyphs doubles the size, it would still only be ~28 KB compressed.
Unless there's a simple "actual fix" to the problem, just stick with this.
Is it an option to transform the case on the server-side? For example, php has this: http://php.net/manual/en/function.strtoupper.php
That might fix your IE7 problem, if it's practical to use such a function.
a just had the same problem and solved it quick:
for ie7 to render the font correct with text-transform "uppercase" it's enough for ie7 that the lowercase-letters are defined in the font file, they don't need to contain real letters = they lowercase-letters in the font-file can be empty and the size of the font does not increase.
My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this.
I've tried copying and pasting from my browser into Word, but it's not preserving the font.
Is there some way to determine which font is actually being used for a section of text?
Firebug will give me the list of fonts as above[1], but I don't see a way to determine which one of the fonts is being used.
It turns out the wrong list was being used, which solved my original Verdana problem. But I'm still curious if there's a way to identify the actual rendering font.
Since many years Firefox and Chrome have built-in tools for that to show all details, but the October 2021 Safari 15.x still needs you to copy some text and investigate that.
Firefox
In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view:
This will also tell you which style is used, such as Regular, ExtraLight, Italic, BoldItalic and all.
Like for the above screenshot:
.SF NS
System Font
Apple SD Gothic Neo
Apple SD Gothic Neo Regular
So, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Just hover a single font name in the inspector to highlight the glyphe(s) that use that specific font. Hovering "Apple SD Gothic Neo Regular" nicely highlights just the "웃":
Hovering "System Fonts" gets me:
For web fonts, it seems Firefox shows the name from the CSS along with details from within the downloaded font. In its "All Fonts on Page" section it also tells where fonts were downloaded from.
For me, in October 2021, Firefox has the best options to determine the font. But: not all browsers may use the same font, so read on!
Chrome
For Chrome, go into DevTools' "Elements", go to its "Computed" tab, and scroll all the way down to the section called "Rendered Fonts". Unlike with Firefox, this only shows the base font name, not any specific style it may be using:
For web fonts, Chrome just shows "Network resource" (where Firefox shows many more details).
Like with Firefox, you see all fonts that are used in the element you're looking at, even when only selecting a single glyph. Chrome does give you a count of the glyphes that use a specific font within the selected element, but does not support hovering to highlight the glyphe(s) that use a specific font:
.SF NS — Local file (192 glyphs)
.Apple SD Gothic NeoI — Local file (1 glyph)
Safari
The October 2021 Safari 15 has finally introduced a "Fonts" tab, but its output is quite limited. For "Identity" it often shows secondary information such as "TN web use only" (where Firefox shows that as a comment, like in "Interstate Condensed, TN web use only"). Or shows nothing at all. But, finally, it's a start:
This only works for elements. For text nodes (like a single character), the fonts tab is not shown.
For the same example as used above, Safari does not even indicate multiple fonts are used:
Identity
Name .AppleSystemUIFont
So, read on.
Other browsers (and Safari)
For Safari and other browsers that do not have a full fledged fonts view, simply copy & paste a fragment of the text into some word processor or Rich Text editor, select some specific text, and see which name shows up in some font dropdown list. On my Mac, this does not work when pasting from Firefox (where for "웃" Firefox's "Apple SD Gothic Neo" is converted into "AppleMyungjo" on pasting), but works well for Safari and Chrome:
Multiple fonts in a single HTML element
For the above screenshots, the actual CSS defines:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
But those fonts often don't include many special characters. As the font information works per HTML element, where Unicode text in an element could actually use multiple fonts in its child text node, the developer tools show multiple fonts as well. When in doubt, hover the fonts in Firefox, or in other browsers just double-click the text in the HTML pane and get rid of the text you're not interested in. Then, when selecting the surrounding element again, you'll just see one option.
Different fonts in different browsers
Unfortunately, different browsers (and even different versions of a single browser) on the very same machine may use different fonts, due to the font types supported/preferred by a browser. On a Mac, for example, Safari may prefer Apple Advanced Technology while Firefox supports Microsoft OpenType (which may yield problems for Arabic after installing Microsoft Office on a Mac). Or for the "웃" character in the screenshots above, Firefox and Chrome on my Mac nowadays prefer "Apple SD Gothic Neo" and ".Apple SD Gothic NeoI" (which are OpenType PostScript) but older versions of Firefox used "AppleGothic Regular" instead (which is a TrueType font).
file /System/Library/Fonts/AppleSDGothicNeo.ttc
/System/Library/Fonts/AppleSDGothicNeo.ttc: OpenType font collection data, 2.0, 18 fonts, at 0x60 OpenType Font data, 18 tables, 1st "BASE"
file /System/Library/Fonts/Supplemental/AppleGothic.ttf
/System/Library/Fonts/Supplemental/AppleGothic.ttf: TrueType Font data, 18 tables, 1st "cmap", 33 names, Macintosh, Copyright ? 1994-2006 Apple Computer, Inc. All rights reserved.AppleGothicRegularAppleGothic Reg
Note that Chrome (on a Mac) shows a leading dot and trailing uppercase "i" in "NeoI" which are lacking in Firefox for the same example. On that Mac, Font Book shows:
I've not investigated what that entails.
The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.
Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.
Firefox 22+ will show you which font is currently in use, without any extensions.
There is no need to use any external browser plugins for that.
In order to check which font is really used on the website in Google Chrome, you need to:
open developer tools (right click on a website and select inspect)
select desired object within "elements" tab
select "computed" tab, in the bottom pane you would see "rendered fonts":
You could try checking that specific section with Firebug for Firefox. It should give you all the exact properties.