How can I manage css and php gd2 font size? - css

Font size of php gd2 and css is different.
How can I manage it?
Any formula to manage it?
Because when I send a string with font size in css it prints much larger in php gd2 than css font.
Please tell me some ideas to manage it.

in different versions of php_GD there different types of fonts. if you are using php-gd2 font type is used pt (point) not px. and in first php-gd i think px is font unit.

Related

CSS numeric font style - One line height

I have a question regarding one of google web fonts.
Font which i mean is 'Alegreya Sans'
By default numbers are not aligned in same way... Somehow designer send me zeplin file where he is using same font with equal line heights.
You can see here what i mean (its my default html style):
This is how it looks on design:
And this is what i achived with css right now using:
font-variant: diagonal-fractions;
But problem in this solution is - numbers are to small right now... I cant change font size, because its mixed sometimes with letters.
Once in another project I fixed it somehow with css, but i cant remember how I did it. There was some css property which fix this issue.
Okay, so i have answer for my question.
Google web fonts has limited font features when we using it from google cdn - i guess to make it lighter...
So i decided to download this font as desktop font, and then from .ttf files i generated webfont using transfonter.
I simply used
font-variant-numeric: lining-nums;
And font looks perfect now!

Difference size font rendering on Windows VS MacOS. How to solve?

I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

After changing to #font-face, lists are spaced out?

I have a font installed on my pc, but after using a font-face converter and changing the css suitably, the lines in my ul are more spaced out, the font-size hasn't changed, but the spacing between them has. What CSS do I need to use to revert this? Example: http://www.givetoagiver.co.cc/about.php
If you need any more information, then please ask, thank you
letter-spacing (http://www.w3schools.com/css/pr_text_letter-spacing.asp)
line-height (http://www.w3schools.com/css/pr_dim_line-height.asp)
The above two take care of all the distanced between lines and individual characters.
Still, if the font works OK when it's installed locally, there's a chance the conversion process introduced the problem. What tool have you used for the conversion? Have you tried Font Squirrel's converter? I've never had issues with it.
PS. The link you provided does not seem to work for me.
[EDIT]
#Yi Jiang suggested these links as an alternative to the ones provided by me:
http://reference.sitepoint.com/css/letter-spacing
http://reference.sitepoint.com/css/line-height
Each font can have its own spacing. Web fonts usually uses both the same spacing, so we use them without any issue. with custom fonts, sometimes we've got to change the line-height accordingly:
font: 44px/1.2em Sohoma;
1.2em is the line-height.

Large Web Font (Yes or No?)

I want to use special font on my website, but the file is over 9 MB. Is it possible to reduce font's size? Thanks folks!
If the font's EULA allows it, you can shrink down the number of glyphs in an OpenType font using FontForge.
Unless this site is being served over a LAN connection, using a 9MB font is ridiculous. That would force each user to be downloading a 9mb file just to view the font you use. You would be much better off picking a font that everyone has.
www.fontsquirrel.com offers the font-face kit section that converts fonts for you - one of the choices is to have a subset of glyphs - only uppercase or just numbers. That might help to reduce the size. Typically fonts served as WOFF are below 100kb.
Even if you shrink the font, most users' web browsers won't download or display it.
http://www.webdirections.org/blog/the-return-of-font-embedding-to-the-web/

Blackberry Font-Family

I am currently making a mobile version of our application and I am trying to find a resource that lists out what Fonts the Blackberry devices support. I search around on the Blackberry development site and forums but have not had much luck.
So far, any font I specify using CSS does not appear to be working.
If you can't find a list of supported font names, you can simply specify font-families. These are the font-families used in WCSS (WAP CSS):
serif
examples: Times New Roman
sans-serif
examples: Arial, Helvetica
monospace
examples: Courier
cursive
examples: Zapf-Chancery, Caflisch Script
fantasy
examples: Western, Critter
Content Design Guidelines from RIM:
Best Practices: Using fonts effectively in your web content
Modify fonts judiciously. Use the user-defined default font for the BlackBerry® Browser where possible, unless you have a
specific need to select a different font. Although using the user-defined default font makes it more difficult to control layout
and appearance, it avoids issues of choosing a font face or font size that the user finds hard to read. Users will either change
the default BlackBerry Browser font to a suitable font face or and font size, or accept the theme-specified default font.
Avoid absolute font sizes where possible. If you change the font size, use relative sizes, such as larger, smaller, xx-large, and
so on. In standard text flows, such as a series of paragraphs, changing the font size is unnecessary, since text will wrap.
Keep in mind that the user can specify the smallest font size for the BlackBerry Browser, so relative or absolute font sizes
that are less than the specified smallest font size will produce no effect on a user's device.
Some resources you might be interested in:
Documentation for Developers (Blackberry Browser) - Includes CSS guide.
Browser Specification (flash presentation)
WCSS Tutorial
User-Agent Profiles of all Blackberry Devices - Shows supported mime-types, character sets, screen size, Java support, etc.

Resources