Do system font stacks, e.g. something like...
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"> Whatever sans-serif font, but please use that ugly Arial as a last resort only </p>
...work in common email clients too?
I've tested it on my own devices (Outlook 2017 & Android App, Android E-Mail, Gmail Web & Android App), and it seems to work so far.
But what about Apple? I've got no devices to test and I don't know if I have to use the system name or the font's real name.
Yes, system fonts work in EVERY email client, including every Apple product on Mac OS (Apple Mail, Outlook for Mac, etc.) and iOS (iPhone Mail, iPad Mail, Gmail for iOS, etc.)
The font stack works just like it would on the web. Using your example:
<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"> Whatever sans-serif font, but please use that ugly Arial as a last resort only </p>
If -apple-system is installed, display that.
Else if BlinkMacSystemFont is installed, display that.
Else if Segoe UI is installed, use that.
And so on.
GitHub uses a font stack with 100% system fonts that covers most bases, just as an example:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Related
I got an issue that big video files (above 20MB) displays cropped. This happens only on firefox mobile browser (102.2.1). I made a POC on stackblitz. This is looks like on mobile device
I try to debug it and change some css but nothing worked. Does anyone has any idea?
This video element has css:
width: 100%;
height: 100%;
object-fit: contain;
background-color: black;
We have fonts defined in LESS file as follows:
#base-family: Segoe UI, Arial, Helvetica, sans-serif;
#base-family-bold: Segoe UI bold, Segoe UI, Arial, Helvetica, sans-serif;
#base-family-semibold: Segoe UI semibold, Segoe UI, Arial, Helvetica, sans-serif;
#base-family-light: Segoe UI Light, Segoe UI, Arial, Helvetica, sans-serif;
I really don't know what to make of it. Times New Roman isn't mentioned anywhere in our LESS file and Segoe UI works perfectly fine on the rest of the browsers.
Segoe UI might not be available on Mac. It's a paid font which is bundled with Microsoft Office 2007 and up.
See this answer for more info:
Will Segoe UI work on Mac?
For some utterly mysterious reason, the top left logo on my page doesn't show up on Chrome (works fine on FF).
Parent theme is "Renovate" with main plugins being Revolution Slider and WPBakery Visual Composer. Not sure if that matters.
Add this to your css for the page:
a[title="The Book Balancer"] img {
width: auto;
height: auto;
max-width: none;
}
You have some other styles on the page not playing nice with your logo.
I've got a bizarre opacity issue dealing with IE8 & Websphere 6.1.
Got a very basic opacity setup where we have a modal type dialog box over-top of a certain screen. I put an opaque div over top of the screen in the background so the user can't click any of the controls but can see it, and then add the dialog box overtop & force them answer the question. Seemed very basic and was easy to do.
This is the css used to create the opaque effect described above:
.wipeOutDiv {
top: 0px;
left: 0px;
position: absolute;
width: 100%;
height: 100%;
background-color: #d9d9d9;
filter: alpha(opacity=70);
opacity: 0.70;
}
This is the CSS used to create the dialog box:
.dialogBox {
position: absolute;
width: 350px;
margin: auto;
z-index: 1;
background-color: white;
border-top:12px solid;
border-top-color: #ffd93f;
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: #ffd93f;
padding: 8px;
top: 40%;
left: 40%;
font-family: arial;
font-size: 8pt;
}
This scheme works fine in development across all browsers. Locally on my machine it works fine and on the integration environment it also works fine. Thought I was in the clear.
However, once it goes to our ST environment or above, the opacity fails to work correctly with IE8. It still works fine for Chrome & FF but for some reason IE8 fails to work correctly. The div using the 'wipeOutDiv' CSS class becomes totally solid and it looks strange. I've tried tinkering with IE's browser mode and document mode, but nothing I've changed has made it work in those environments.
I've compared the DOM documents between environments and they are identical. The only variable left to me is the Application server itself, which in this case is Websphere 6.1. I have noticed one difference is environments where it works are served via http and environments where it doesn't are https. This seems like more of a coincidence than an actual root cause.
I'm pretty miffed. Anyone have any suggestions or similar experiences?
This ended up being an issue with IE enabling "Protected Mode" on a non-trusted site by the local machine. The IE opacity hack requires using an outside .DLL file and IE won't let that happen without protected mode being enabled. This was only solved when someone's machine worked correctly in production and they noticed they had the site added to the trusted list.
I have a wordpress blog. In each post there are images that resides on Blogger server.
Now the problem is several of those images cannot be view on Internet Explorer 8. I do not know why, and the worst part is my client uses Internet Explorer 8 and he does not like any other browser.
Therefore, I need all the images to be viewable in Internet Explorer 8.
Here is the link and please try to help me out: http://bit.ly/AnPTCC
P.S: When i upload an image via wordpress it shows fine.
I couldn't pinpoint what was creating the problem but the override is to add height and width to the span element that contains the image.
<span clear: both; margin-right: 1em; margin-bottom: 1em; float: left; height: 200px; width: 135px;><img ... /></span>
Somehow span is getting crushed and couldn't show the image in IE8 Mode only but it works in IE7 and IE9+