Newbie using a \div\ and inline font-weight around text in an HTML email to more closely match a light web sans-serif font. It renders fine using Email on Acid's tool. Code as follows:
\\div style="text-align: left; font-family: Helvetica Neue, Helvetica, Arial, Verdana, sans-serif; font-size: 18px; font-weight: 300; color: #333333; line-height: 28px;"\\
One PC/Outlook VIP stakeholder is seeing the Arial in a serif Times New Roman-ish font. I don't see how.
How can I overcome that -- without too much CSS? (I'm a CSS-novice.) Thx.
Use conditional tags for Outllook to force font-family(only native) and line-height
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
td,
td p,
td a {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}
td p,
td a {
mso-line-height-rule: exactly !important;
}
</style>
Outlook doesn't support Helvetica Neue. When you include a special web font in the font-family it will revert to Times New Roman.
See more about fonts for email here: https://www.emailonacid.com/blog/article/email-development/best-font-for-email-everything-you-need-to-know-about-email-safe-fonts/
Related
According to this Monospace in ipywidgets.Textarea?, I was able to change the font of my textarea. But no way to change the font-size.
Do you know a way please ? It seems that font-size has no effect.
cf the code below:
from IPython.display import display
display(HTML("<style>textarea, input { font-family: Arial, Helvetica, sans-serif; font-size: 20px; }</style>"))
from ipywidgets import Textarea
Textarea('The world is bigger than you.')
Thanks,
Hadrien
The font-size attribute is overridden by --jp-ui-font-size1 from :root so you should update this one instead. Combine this with some ipython magic:
%%html
<style>
textarea, input {
font-family: Arial, Helvetica, sans-serif;
}
:root {
--jp-ui-font-size1: 20px;
}
</style>
First time here, so sorry for any lack of understanding in the code of conduct of this place.
I've already read the post with a similar described problem, but it didn't help :-/
Sorry, I'm a n00b, be gentle!
Just started structuring my sass into different files, and at the same time started using sass instead of scss.
My problem, which is probably really simple and stupid, is:
Compilation Error
Error: Invalid CSS after "...align: top; } }": expected 1 selector or at-rule, was "{"
on line 43 of Users/Test/Documents/walters.dk 6.0/styles/1-base/_typography.sass
from line 2 of Users/Test/Documents/walters.dk 6.0/styles/1-base/_base-dir.sass
from line 2 of sass/Users/Test/Documents/walters.dk 6.0/styles/app.sass
>> vertical-align: top; } } {
The file the error is originating from looks like this:
(Line 43 is the bottom one, "vertical-align: top")
// Text
h1
font-family: 'Raleway', sans-serif
font-weight: 300
display: inline-block
color: $redish
margin: 0 auto
text-align: center
font-size: 25px
line-height: 1
h2
font-family: 'waltershand', Arial, sans-serif
text-align: center
font-size: 10rem
margin-top: 3%
h3
font-family: 'waltershand', Arial, sans-serif
text-align: center
h4
font-family: 'Raleway', sans-serif
font-size: 0.85rem
font-weight: 600
display: inline-block
h5
font-size: 3rem
font-family: 'waltershand', Arial, sans-serif
margin: 4vh 5vw auto 5vw
z-index: 2
+mq(875px)
font-size: 4.4vw
display: inline-block
vertical-align: top
First time using mixins, so in case it helps, i have added the code below :
=mq($size)
#media only screen and (min-width: $size)
#content
The files compile into app.sass like this:
#import 'variables'
#import '1-base/base-dir'
I'm guessing the problem isn't in the actual line 43, but rather in the way my mixin is written, or the way its importet.
Here's hoping some brainy code master can help!
By removing this
+mq(875px)
font-size: 4.4vw
display: inline-block
vertical-align: top
Your code is good to go. I'm not sure about the mq what does it do ?
You can cleary see the error and try it out here
Error: no mixin named mq
Backtrace:
stdin:38
on line 38 of stdin
#include mq(875px) { -------------^
I want to show google updates ,webpages are responsive but image width is not showing properly and go out of the boundary. Here is content of webpage.
<div dir="ltr" style="text-align: left;" trbidi="on"><span id="docs-internal-guid-489c1670-b0dc-d32d-645e-eaf6ca555069"><span style="font-family: Verdana; font-size: 13.3333333333333px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;"><img alt="whats_new_doc_header_may2015LL.gif" height="112px;" src="https://lh5.googleusercontent.com/6RY9WSfX5yDRLKfl_Vp7GRQR1bFew_fO2rfOh7qcWrWwLvuaWtTxwIedwqvZJrQqGRPrlsJ-J3nlwrBGcEfhzDDwL_3yec8occvTSJTNeQVHNk4_tlmB-SQYfkqYkkJkRAJM64Q" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="624px;" /></span></span><br /><span style="font-family: Arial, Helvetica, sans-serif;">Check out the latest "What's New in Google Apps" </span>newsletter<span style="font-family: Arial, Helvetica, sans-serif;"> [</span>pdf<span style="font-family: Arial, Helvetica, sans-serif;">] for a roundup of all Apps launches from May 2015.</span><br /><br />Newsletter Archive & Translated Versions (coming soon for May issue)<br /><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span><i><span style="color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></i><i><span style="color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Note: all launches are applicable to all Google Apps editions unless otherwise noted</span></i><br /><br /><b>Launch release calendar</b><br /><b>Get these product update alerts by email</b><br /><b>Subscribe to the RSS feed of these updates</b></div><img src="http://feeds.feedburner.com/~r/GoogleAppsUpdates/~4/5Saf-LdMFA4" height="1" width="1" alt=""/>
NSString *htmLData = #" ";//Write your all Response Here
NSString *strTemplateHTML = [NSString stringWithFormat:#"<html><head> <style TYPE=\"text/css\"> img{max-width:100%;height:auto !important;width:auto !important;};</style></head><body style=\"margin:10; padding:0;\">%#</body></html>",htmLData];
[self.webView loadHTMLString:strTemplateHTML baseURL:nil];
I have a simple html h1 title that works fine on desktop browsers but duplicates the font on iOS (Tested on Safari & Mercury Browser)
Preview image: http://d.pr/i/ku1I
The h1 css:
.headerInterior h1
{
width: 100%;
float: left;
color: #f2085c;
font-family: 'effBold';
font-size: 79px;
}
Does anyone had the same problem and know a solution for this?
Any help will be appreciated.
Cheers!
Try this:
Add this in your CSS class
font-weight: normal;
OR
text-shadow: 0 0 0;
This happens because the browser tries to generate the font weight thats requested if its unavailable already (h1 class in the example has default font-weight set to bold).
For instance, if we are using the following Google Fonts URL:
http://fonts.googleapis.com/css?family=PT+Serif:400,600italic
We have two ways to use this font:
.first-way{
font-family: 'PT Serif';
font-weight: 400;
}
OR
.second-way{
font-family: 'PT Serif';
font-weight: 600;
font-style: italic;
}
Using: font-weight: normal; basically defaults to the font-weight of the available font.
Further reading: http://alistapart.com/article/say-no-to-faux-bold
I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices.
This is what I have:
//Source code
<div id="signinbutton" class="blue_button">Sign In</div>
//desktop.CSS
.blue_button {
width: 130px;
height: auto;
padding: 8px;
margin: 0% auto 20% auto;
background-image:url(../../images/bluebar5.png);
color: #FFF;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14pt;
font-weight: bolder;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: default;
}
.blue_button:hover {
opacity: 0.7;
}
//Handheld.css (this overwrites css on desktop)
.blue_button {
width: 260px;
font-size: 18pt;
background-image:url(../../images/bluebar6.png);
}
I tried applying the style to #signinbutton without success.
You should use a <button> or <input type="button"> tag instead of a div. While the <div> button functionality may work in some browsers, it can be a bit of a hack compared to the traditional button tags
You can wrap your div around <a> like this. It's perfectly valid with html5 now.
<div id="signinbutton" class="blue_button">Sign In</div>
You just need to adjust
Reference:
https://css-tricks.com/snippets/jquery/make-entire-div-clickable/
Try adding to the style of the div {cursor:pointer}.