This one is quite specify: specify ttf font rendering font-weight:bold incorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:
(this is Reenie+Beanie from google fonts)
http://jsbin.com/ojeqe3/16/
Screen capture
You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in
My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is not OK)
Update:
This one is not fixed in iOS5.
The best solution I know for the problem will be
Use font-weight:normal (as shown in demo)
Use either -webkit-text-stroke or text-shadow to make it look "bold" (plus iPad only css - body prefix added by js, not only media query)
Had the same issue with an h1 inheriting the font-weight: bold; from a parent class. Just overwrite the inherited style with a font-weight: normal;
It seems that Mobile Safari has a buggy way of rendering faux styles with font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.
In your case the Reenie Beanie does not include a bold style, and if you're using them as heading without changing the font-weight to normal or 400 it will render the bold weight "faux styled".
Please do note that using faux styles is generally buggy in some browsers and not only in Mobile Safari.
Solution 1. Use the appropriate font-weight
So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:
h1, h2, h3, h4, h5, strong, b {
font-weight: 400;
}
/* or font-weight: normal */
Solution 2. Use a font that does provide the bold/italic style that you want
The other solution is to pick a font from a web font archive that does include a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.
Solution 3. Fake the faux using other means
If you really insist on wanting a faux bold style you can try using a thin text-shadow or text stroke.
don't use the 'bolder' or 'bold' tag. they aren't necessary if you are using a specific weighted webfont.
I had the same problem. It went away when I removed any mention of font-weight.
Try applying this css rule:
-webkit-font-smoothing: antialiased;
Related
I decided to write the name of this plugin of mine as vim↪softwrap rather than vim-softwrap, but, to my surprise, GitHub shows the ↪ as an icon:
What can I do to avoid that?
I'm not sure whether it's GitHub that is doing it or it's the Markdown specification to require it.
It looks like it's using these fonts (the css selector being the <g-emoji> tag that it inserts around emoji unicode):
g-emoji {
font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
If you save this as an html file an open it, you will see the same thing:
<p style='font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'>↪</p>
I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).
What I did so far:
I added the icon set (all icons are svgs) into “public/assets/customicons/”
I imported IonIcon into my components where needed
Integrated the (e.g. )
So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables
Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?
Custom Font
Goal: I want that the custom font is shown on all platforms
What I did so far:
Added the custom fonts in “src/assets/fonts/”
Created a “fonts.css” in “src/theme/” where I integrated the font via “#font-face”
#font-face {
font-family: ‘FONTNAME’;
src: url(’…/assets/fonts/FONTNAME.ttf’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
assigned the font to differnet elements
Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)
Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.
Thanks for your help!
Short question
Using CSS only, how do I detect that the background-size property is supported? If it's not supported, I would like to provide some fallback CSS. I already know how to do this with Javascript, but it's cleaner with CSS.
Long question
I have a high resolution sprite image that needs to look good on all cell phones, regardless of its exact pixel density. By using a background-size trick, I can scale the sprite appropriately.
.sprite {
background-image: url(sprite180x76.png);
/* 180 / 2 = 90 */
background-size: 90px auto;
}
There are some iOS and Android versions that don't support the background-size property, so the sprite would look twice as big as it should be. For these old systems, I would like to load up a low resolution sprite with no background scaling:
/* fake CSS */
#notSupported(background-size)
.sprite {
background-image: url(sprite90x38.png);
}
}
CSS doesn't have conditional statements as it's not a programming language like Javascript. Although, I believe there might be some kind of conditional statement in the works for CSS.
You'll have to rely on JavaScript to achieve any kind of conditional test case for CSS.
Meaning, you can't directly detect support for CSS.
However, CSS does have a "trick" thanks to its "Cascading" nature, but it's only usable when looking to replace some older code with newer code for the same style.
That sounds funny, here's a couple of examples:
-moz-border-radius: 6px;
-o-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
border-radius: 6px;
In browsers that do support the official CSS, it will the style as denoted on line 5. While in older versions of say Firefox, line 1 will get applied and line 2-5 will get ignored because they're unknown.
Another (and perhaps better) example could be:
background-color: #AAA;
background-color: rgba(0, 0, 0, 0.5);
This code will give the background a grey color, while newer browsers will give it a black color with a 50% transparency, overriding the old color.
Hope that helps a little.
Cheers!
-- Update --
I did just come across something that might help. In Aaron Gustafson's book "Adaptive Web Design" he mentions how CSS will ignore an entire rule if a given browser/renderer doesn't support a given selector.
With the concept above, if you can find a selector that was not implemented in the older version but is available in the newer version you could do something like this:
/* fake CSS */
.sprite {
background-image: url(sprite90x38.png);
}
[[ selector that is supported by newer browser/OS ]],
.sprite {
background-image: url(sprite180x76.png);
/* 180 / 2 = 90 */
background-size: 90px auto;
}
The idea is that for the "old" browsers you can load the old PNG but for the newer browser it will load the larger PNG and apply background size.
The only thing I would be concerned about is if this causes the supportive browsers to load both images but apply one.
And this still requires finding an unsupported selector in one version of another. Quicksmode.com might help you find one:
http://www.quirksmode.org/css/contents.html
-- UPDATE 2 --
I put this in the comments but I'll add it here as it might help. I spent some time trying to find out what browser version iOS 3.1.3 supported and therefor what selectors might be possible to use with the above trick.
What I found was this Apple developers site: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html
If you do a page search (ctr+f) for background-size, it shows that iOS 1+ supported a proprietary version called:
-webkit-background-size: length
-webkit-background-size: length_x length_y
That might be a possible solution. If you add that before the real one, you can ensure backwards compatability.
-webkit-background-size: length
background-size: length
Hopefully that helps find alternate solutions since the original question of doing a conditional test to see if a rule is supported is not possible in CSS right now.
You can't (for now) detect support of property A and, given or not this support, serve different values for property B with CSS only ...
... except if the browser support for properties A and B is exactly the same! Then instructions below:
selector {
propertyA: valueA;
propertyB: valueB;
}
will both fail or both succeed.
The remaining problem is to find a CSS property that has the exact same support than background-size :)
I was thinking about multi-background : it should (not) work in IE6/7/8 according to CSS Background Properties support in Standardista but I can't test in iOs and Android, only in bada/Dolfin 2.0 (Samsung Wave; also based on Webkit).
Here's a Fiddle : http://jsfiddle.net/PhilippeVay/2VaWu/
that shows a paragraph with only a simple background that any browser should display and then another paragraph with both a simple background and (*) a multi-background resized with background-size that only modern browsers should display (older browsers should display the same background as for the first paragraph).
Fx9 and dolfin 2.0 both display correctly the second paragraph. IE8 doesn't, as expected.
Another solution would be to use a selector understood by browser versions that also understand background-size but not understood by others. Though it's easier to find for IE than for smartphones based on Webkit!
(*) using a different CSS rule with higher specificity, for the purpose of the demo. In real world, there'd be only one rule with simple background defined before the multiple background.
The iPhone is admittedly not the best platform for viewing code, but I'd like to optimize the mobile portion of my web site for the device as best I can. I'm having trouble getting code (Java code, in this case) to display properly.
I'm using <pre> tags, along with some CSS to render a nice little background for the code. This looks OK:
However if you scroll to see the rest of the code, you get this:
The text inside the <pre> is rendered properly, but the background color stops at the width of the device. I have tried this in the simulator, in a 3G device running 3.0, as well as in a 3G running 3.1-beta and they all behave this way.
It does render fine in Safari on the Mac; just not on the iPhone.
Here is the HTML:
<pre>
String input = readUserInput(); // assume defined elsewhere
int i;
try {
i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>
And the CSS:
pre {
font-weight: bold;
border: 2px solid green;
background: #669999;
padding: 5px;
}
What a curious bug! I'm able to reproduce it on a real live iPhone. I'm guessing it's caused by something about how iPhone processes the viewport settings. One thing you should clarify is what viewport setting you have in your page (via a meta tag). Your screenshot suggests it's something smaller than the default 980 pixel size. I tried tinkering with the viewport in various ways but couldn't stop this bug from occurring.
I have one workaround, which is to set a width parameter on the pre block. Ie:
<pre style="width: 50em;">
This is a bad solution for several reasons; it makes a fixed width block, it screws up your border, etc. But it does result in a coloured background block that's wider than the viewport. Maybe it's acceptable to you or maybe it's the basis of a real solution.
Have you tried setting a width or min-width for your pre block? Or perhaps trying a different position or display attribute for the block. Could try floating it or display: table. Just some ideas.
I'm not sure if pre accepts the overflow attribute but I'd try setting that, if not, wrap it in a div and do the background there, will give you slightly more freedom in your formatting options. (for instance if you wanted to have several blocks of code with "captions" underneath each part)
I am having the "Futura.ttf" font file.
I am displaying a HTML page in the UIWebView, but my requirement is that i want to use the custom font in my css file.
so is there any way that i can use the custom font in my css file ???
All suggestions are welcomed.
Thanks.
It is possible to load custom fonts into your UIWebView in iOS3.2 and above. Add the font to your bundle (see here) then just reference the font in your UIWebView's stylesheet like you would any other font:
<style type='text/css'>font { font-family: DroidSerif; } </style>
You have Cufon and sIFR as your options.
Typeface.js is a pure JavaScript Replacement
Cufon is a pure JavaScript Replacement
sIFR is Flash and Java font implementation,
FLIR JavaScript and PHP implementation
Some Comparisons
http://thatguynamedandy.com/blog/text-replacement-comparison
http://thinkclay.com/technology/cufon-sifr-flir
http://aaronwinborn.com/blogs/aaron/cufón-alternative-sifr-image-replacement
Below is taken from this question Worth reading the whole thread, has greatdetails.
Typeface.js
Advantages:
User doesn’t have to have Flash
plugin installed on their browser
Easier to create with just a few
lines of Javascript
For page loading it just needs to
load the Javascript
Disadvantages:
Text is not selectable because it
outputs it like an image. I looked at
some examples, right clicked on a
word and had to view as an image.
Every single word had this behaviour.
Big thumbs down.
Usage for body copy will slow down
loading time, so it is recommended to
use only for headlines.
Cannot be read by screen readers
Visual looks blurry
Not all browser compliant and still
has a lot of development left to be
done
sIFR
Advantages:
Can be read by screen readers as a
normal headline because it is a
behaviour layer on top of the markup
and styling.
Text is selectable
SEO friendly
Displays text as is like any other
web font. Crisp and not blurry!
Has addons like jQuery sIFR Plugin!
Disadvantages:
Requires Javascript to be enabled
Flash plugin must be installed in the
browser
Need Adobe Flash Studio to create it
BUT there is a pretty nifty sIFR
generator that creates the file for
you!
For page loading, it has to request
for Flash, Javascript and CSS files
attached to it, which can potentially
get bogged down if you are using sIFR
in too many places.
Cannot display on an iPhone. Yet…
Cufón (similar to Typeface.js)
Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there - no Flash or images required.
There are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site's users.
Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today.
The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily "stolen" and either used on another website or reverse engineered.