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
Related
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) { -------------^
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/
i want to use “Comfortaa” font in my application,to all page(like default font).i used the font using url.
like this:
<style>
#import url('https://fonts.googleapis.com/css?family=Comfortaa');
</style>
in .scss
font-family: 'Comfortaa'
but application is in offline the font did not work in my aaplication.how i can use the font in both offline and online condition.
when app is in offline it shows a italic type font.
like this
For add custom font in a application
Do following step:
Add custom font to assets/fonts folder
Add following code to app.scss file
#font-face {
font-family: 'San Francisco Light';
font-weight: normal;
font-style: normal;
src: url('../assets/fonts/SanFranciscoDisplay-Regular.otf');
}
After In theme/variables.scss file
add variable name
like this:`enter code here`
$font-family-ios-base: "San Francisco Light";
$font-family-md-base: "roboto";
First download and put the folder in src/assets/fonts and then in your theme folder write:
$font-path: "../assets/fonts";
#font-face {
font-family: GlobalFont;
src: url("../assets/fonts/Comfortaa/Comfortaa.ttf");
}
body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'GlobalFont' !important;
}
I need export pdf with chinese letters, and write code as below link says:
Custom font faces in jsPDF?
and my code:
css:
#font-face {
font-family: SimSun;
font-weight: normal;
font-style: normal;
src: url("./simsun.ttc");
}
body{
font-family: 'SimSun';
}
js:
pdf.addFont('SimSun', 'SimSun', 'normal','StandardEncoding');
pdf.setFont('SimSun');
pdf.text(20, 20, '西溪园区 5号楼 1F');
pdf.save('TestSVG.pdf');
And as someone said that, i have confirmed that addFont is public:
API.addFont = function(postScriptName, fontName, fontStyle) {
addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
};
And i also find the postScriptName of 'Simsun' is SimSun.
http://mirror.sars.tw/FreeBSD_Chinese_HOWTO/simsun.html
Can somebody tell me why?
You're trying to load a truetype collection, not a truetype font. Current versions of CSS do not support font collections, so unpack your collection and then load the individual fonts, instead.
#font-face {
font-family: SimSun;
font-weight: normal;
font-style: normal;
src: url("./simsunregular.ttf");
}
#font-face {
font-family: SimSun;
font-weight: bold;
font-style: normal;
src: url("./simsunbold.ttf");
}
...etc...
body{
font-family: 'SimSun';
}
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}.