I have a custom font which I would like to use on my webpage but its edges blur slightly when viewed in Chrome. I have the font on my server and it's linked in CSS.
Related
We are using font awesome icons but all of a sudden the icons are not showing up while printing.
Yet those are visible everywhere else on the entire site. Just not while printing.
All the related assets like fonts and css are loaded locally from the site.
I have checked the #media print visibility and display attribute they are visible and block only.
I am currently modifying a site for IE11 compatibility and there is a major bug being caused by the CSS font-faces loading.
I am skinning on top of a theme, and am overriding the original theme's font-family for the body of the site. However, what is happening is the site loads with a default font family, the theme's font family is loaded and finally my skin's font family is applied.
What seems to be happening is that on load, the margins for the unstyled text are being set, then as the additional font styles are loaded, the margins remain the same, resulting in overlapping blocks. The blocks correct themselves when moused over, but this is far from ideal.
See the links below as an example:
http://i.imgur.com/N8V5hfA.jpg
After the page has loaded, divs overlap.
http://i.imgur.com/imRgjji.jpg
Once the element has been moused-over (This is the way the content should display on load).
Is there a way to make IE11 position divs properly depending on the size of the content?
I have a problem with my website background. In Firefox and other browsers the background is much whiter and brighter than in Chrome
This is the code for my background :
body {background:#ffffff url(../../images/background.jpg); direction:rtl; }
http://i.stack.imgur.com/inK3d.png
http://i.stack.imgur.com/KiqT4.png
One explanation for this may be that the JPEG image has an embedded color profile that the browsers are interpreting differently. To keep the colors uniform across browsers, the images should be exported with the sRGB color space.
If you're using Photoshop for instance, if you use the "Save for Web & Devices" option, it will automatically convert the image to the sRGB color space. Instructions for changing export color space will change depending on what image editor you are using, of course.
For more information on how color profiles can affect the way colors are displayed on the web, please see this css-tricks article.
Text rendering on the navbar, at least on Yosemite's Safari and Firefox, is very bad. Text doesn't show the curve it has but is like thicker and more imperfect.
If I zoom in the webpage, it improves, also if I force focus at any element.
I wouldn't care much about this if it were always regular, but the problem is with the focus. The page doesn't seem to be well designed, and I don't like that impression at all. I'm using Bootstrap framework with Ubuntu typography. This happens at a font-weight:500.
Example http://www.bootply.com/Ptp4gXpHAF. Just click the search bar.
This is the difference between what I want and what is rendered:
The image shows blurred due to upload resolution but I think there is a big difference.
I just changed the font-weight to 300. Maybe safari tried to render to higher font weight but when I clicked on it the font-weight property was overridden. Within setting it to 300 it worked just fine.
On this page, the <body> element has a background color of #77BFBC. The image (rv-banner.jpg) set as the background of the <header> element also has a background color of #77BFBC.
On windows (either FF or IE), the two colors blend perfectly. However on FF on the Mac, there is a noticeable difference between the background color of the image and that of the <body> element. How can I fix this?
Thanks,
Don
With the release of Firefox 3.5, colour-correction was turned on by default, but its effect depends on your system profile:
http://hacks.mozilla.org/2009/06/color-correction/
In practice, this means images saved with colour profiles are corrected and could show up mismatched to CSS colours.
It's possible to turn off colour-correction in Firefox, which fixes the problem for you, but that still leaves all the other potential visitors out there. Seems like removing the colour profile from the image is the way to go. There is a GIMP plugin that does this, see here for a discussion.
When images are displayed, they are converted from their color space to the color space of the screen.
To make your JPEG images display with the same color conversion as the rest of the elements, you should convert the images to the sRGB color space before saving them.
Browsers that doesn't support color profile information in images always uses the sRGB color space, so if you use sRGB for the images the color profile gets correct even for those browsers.
If there is no color profile in an image file, the sRGB color space is assumed. This means that you can save your images without a color profile to minimise the file size.
Try to save image as png not jpg. And if you are using photoshop, then choose "save for web and devices" not "save as".
This isn't due to your code but color profiles, I don't know if you can change this.