If I specify a font for a TextField, and the text in that field has codepoints not supported by that font, JavaFX will attempt to provide a substitute font based on the fonts installed on the system.
I would like it to always appear as tall rectangles. Why? If the font I have specified can not be used to render the text because it lacks those codepoints, I would like to know. Right now, I have no control over what font is actually used.
A practical example would be a simple font viewer. After you select the font, and text is rendered with it in a preview field, you really have no idea if it is actually rendering it using that font.
Related
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
(Ask to answer)
For the project I'm working on we have a custom set of icons, which I converted into a font using https://glyphter.com/ (just googled this type of service and it seemed okay).
Inside one of the block I'm inserting an icon with the class from the CSS generated by the service (like you normally do with an icon font).
And suddenly the displayed icon is wrong - though the content property is okay.
Also could not find any other interfering styles which could do that.
Sorry, no code here, got no time for that. Also the project is quite restricted in terms of sharing details.
So after half a day of looking for a problem and trying different scenarios, it appeared, that the icon font generated had the same icons for the letters in both upper and lower case. And yes, the set started on the letters, not with an extended UTF-8 table (or whatever).
So the parent element had text-transform: uppercase which changed the icon without changing the content or else.
Maybe someone will find this info helpful.
i've actually never encounter this problem before. I usually start designing my layout in photoshop then transfer it to my page.
Somehow, lately i've been using georgia font alot, and i love it when the style is italic, but what comes out in photoshop does not reflect back in the webpage when i set it in css.
in the pic above, 1. is what i saw in photoshop and what i wanted, but 2. is what i got, no matter what i try changing, be it font-weight or font-size it remains as bold. I want it thinner, is there a way? I tried font-stretch too btw.
It's not the bold, it is a system font smoothing.
You are able to change (or disable as in your case) font smoothing in Photoshop, but you can't do it with CSS, unless you are using CSS3 and compatible browser.
Added: I wouldn't recommend you to even try to change the font smoothing. That's the user right - to have fonts rendered the way she likes.
When I look on the font-family of an HTML element (from js, firebug or similar) it's always a list. How can I see which of the font is actually used from the list?
I realise it's not ideal, but you can copy the text from the viewport and paste it into a rich text editor, and it will tell you.
It's a bit fiddly, but using Firebug you can tweak the name of each font in a font-family, working left to right until the element's font changes, meaning it was the last font you changed is being used. On the latest Firebug at least, you only need to add or remove a letter from a font's name for the change to be reflected.
The Font Finder add-on for Firefox can do this. Since it’s clearly possible, it sure would be convenient if this were built in to Firebug.
Update 2012/2/4:
I examined the Font Finder source to find out how it works, and it’s actually a clever little hack. The relevant code is in the Detector class in fontfinder.js. To quote the source:
Inner class that's used to determine which font is rendered. It
operates under the foundation that each font has a unique height &
width when given a large enough font size & sample string
What’s it doing is almost like an automated version of Marcel’s answer.
So how it works is that a dummy element — with the text “mmmmmmmmmmlil” — is added to the DOM. It is set to use the browser fallback font, “serif”, at a font-size of 72px. With that, Font Finder knows the width and height of the element when the fallback font is in use. Next, it just iterates through all the fonts listed in the font-family, setting the font on the element in turn, for each one in the list. If the width and height of the element matches the width and height when the fallback font was set, we can deduce that the given font is not present. The first font in the list which produces a different width or height on the element will be the font that is actually being rendered (note: there is a special case involved when the fallback font, “serif,” is in the font-family list).
There is also a Chrome version of Font Finder. It differs (relevant source) in that the browser fallback font appears to be “sans” — not “serif.” Any code using this method will have to have browser-specific knowledge of the fallback font.
I want to style some fonts in my css using the style- sharp found in Photoshop. Does anyone know the way?
Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.
For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.
No luck I'm afraid. The only way I know of (perhaps someone knows otherwise) to achieve this is to save the text in question as an image. Fine for headings etc., but not for body text.
The "sharpness" of a font is usually a thing of the font renderer which is part of the operating system. You should check the font settings. In Windows, for example, try turning off ClearType.
I'm afraid it's a browser/os combination that decides how your fonts are anti-aliased. Nothing you can do about it, except save the Photoshop output as an image, set it as a background for whichever container your text appears in and apply a negative text indent on it via css.
There is solution for font smoothing.
You can use cufon.js to render your font sharply & smoothly. This js renders your text as a cufon and if you right click on it it shows image. You can use this for heading.