I don't know why I am getting this 3d effect in words. How can I remove the effect and flatten the words?
The font family is Poppins
body {font-family: "Poppins";}
You can do any formatting with CSS.
a {font-style: normal;}
will make font style as normal
There may be a CSS conflict. Try this. Change class & the colors as suitable.
add
text-shadow: none;
.text-class
{
text-shadow: none;
background: #333;
color: #fff;
}
Related
I'm developing a site on Ubuntu. When I look at it in Firefox, it's a lot smaller than when I view it in Chrome. Screenshots:
Both browsers have their default fonts set to DejaVu Serif at 16px. I haven't messed with Bootstrap's default font size. It's still 1rem.
What's accounting for this discrepancy, and is there a way to further normalize the differences between browsers?
EDIT: My scss, even though it's not relevant, because it was requested:
$theme-colors: (
"burnt-orange": #fa7334,
"light-blue": #67e2f5,
"dark-blue": #006f80,
"beige": #f5d5bc
);
.header-icon {
font-size: 1.4rem;
}
#jumbo {
background: transparent;
border: 1px solid grey;
}
#diva-sidebar ul {
list-style-type: none;
padding-left: 0.65em;
}
#footer a {
color: white;
}
.errors {
border: 1px solid #c70f36;
color: #c70f36;
background-color: #ffc0cb;
}
#import "~bootstrap/scss/bootstrap";
#import "~#fortawesome/fontawesome-pro/css/all.css";
.header-icon-link-blue {
color: theme-color("dark-blue") !important;
:hover {
color: theme-color-level("dark-blue", 2) !important;
}
}
.header-icon-link-orange {
color: theme-color("burnt-orange") !important;
:hover {
color: theme-color-level("burnt-orange", 2) !important;
}
}
.color-burnt-orange {
color: theme-color("burnt-orange");
}
EDIT: After adding
html {
font-size: 16px;
}
To my custom.scss file, but the problem persists.
I found a similar issue when designing sites using Bootstrap 4.x. The issue is Bootstrap uses the browser's default font size, and then sets relative font sizes from this. However, Firefox and Chrome seem to use a different default size, which causes issues most noticeably when you are using larger fonts on headings. The easiest solution is to set an exact base font size on the html to override the browser default, like so:
html {font-size:16px;}
I think, you need to prefix your css code. Because, all browsers has a prefix code so: -webkit, -o, -moz ets. Go this Link and past your css left column and copy css from right column: for example: Kindly mark it as Answer if it solved your problem :)
I'm trying to style some links such that they appear bold if not visited before, and appear as normal if they have been visited before.
HTML:
Facebook<br>
A Random StackOverflow Question
CSS:
a {
font-weight: bold;
text-decoration: none;
color: #373837;
font-size: 16px;
}
a:visited {
font-weight: normal;
}
a:hover {
text-decoration :underline;
}
Fiddle.
For some reason, whether or not the links were visited before, they appear bold.
I also tried modifying the CSS:
a {
text-decoration: none;
color: #373837;
font-size: 16px;
}
a:visited {
font-weight: normal;
}
a:link {
font-weight: bold;
}
a:hover {
text-decoration :underline;
}
Fiddle. It still doesn't work.
Any idea how to fix this?
(I am using Chrome btw)
The reason is that not all attributes are allowed for the :visited pseudo selector. See MDN.
You could use other attirubtes, such as color: green.
It seems like a browsers limitation.
It seems like a browsers limitation.
"For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in JavaScript it means that someone can walk through your history and figure out where you’ve been. "
read about it here
It's not font-weight: normal that don't work it's your browser.
Because if you add font-weight: normal on the hover property it will work.
Look at this answer
I'm using the Raleway font, but this font doesn't align numbers properly with letters.
You can see this in this snippet:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>
Can I solve this easily? Or is this just a faulty font and should I chose another one?
You can simply change with the help of CSS
add font-feature-settings: 'lnum' 1; to your css file
so your new css will be:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
font-feature-settings: 'lnum' 1;
}
Check out this too http://clagnut.com/sandbox/css3/
The Problem
This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:
If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.
A Fix
You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:
h1 {
font-family: Raleway;
font-size: 2rem;
border-bottom: 1px solid $text-color;
border-top: 1px solid $text-color;
padding: 2rem 0;
}
.raised {
display: inline-block;
vertical-align: 12%;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
<span class="raised">5</span>
Comments
</h1>
2020 speaking
Depending on the font and the browser you can add
font-variant-numeric: lining-nums;
Source : https://css-tricks.com/almanac/properties/f/font-variant-numeric/
https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals
This article explains it all and gives de fully compatible css3 "solution".
This code do the magic:
.yourclass {
-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}
It depends on "the number case setting" feature of your font supports.
still you can do it by following this
Further reading UX stackexchange
I created a version of Raleway with lining numerals as default to be used as The Definitive Solution for this problem. You can download the font files or just embed it into your HTML (using <link>) or CSS (using #import) with a single line of code, like you'd do with any other Google Font. Free, open source and available in all weights and styles:
https://h-ibaldo.github.io/Raleway_Fixed_Numerals/
I know you've posted this question a long time ago, but take a look at this property:
.class, #id, tag, * {
font-variant-numeric: lining-nums;
-moz-font-feature-settings:"lnum" 1;
-moz-font-feature-settings:"lnum=1";
-ms-font-feature-settings:"lnum" 1;
-o-font-feature-settings:"lnum" 1;
-webkit-font-feature-settings:"lnum" 1;
font-feature-settings:"lnum" 1;
}
It forces all the numerals to be correctly aligned, so you can just apply this property to * in CSS and any text containing numbers will be a lot more readable.
This code will work for Raleway, I have tested and got the result
-webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum":
As silly as this may sound but I can't seem to be able to customise the Labels' Header, in Blogger. I've tried various different methods and tags to achieve the look I want but it doesn't seem to work correctly. I've tried inserting CSS coding between the tags but to no avail. The following piece of coding hasn't worked either.
.post-labels {
letter-spacing: 0.09em !important;
font: arial 8px #666666 !important;
text-transform: uppercase !important;
margin: -1% 0% -1% 0% !important;
}
.post-labels a {
font-weight: normal!important;
text-decoration: none!important;
}
I have tried the following opening tags also but none of them seem to work:
#post-labels a {
#post-labels {
.post-labels a {
.post-labels {
And I've also tried adding "!important" at the end of each element however even that hasn't worked. What surprises me is that some elements seem to work whereas the others do not. For example the text-align, text-transform, font-weight and text-decoration elements work but the font (size, family & color), letter-spacing and margin elements do not. I've tried every possible variation I could possibly think of but I can't seem to achieve the look I want for the Labels' header.
The URL for my blog is as follows: http://www.blankesque.com
Any help would be appreciated. Thank you in advance.
Iram
You should use
font: arial 8px !important;
color: #666666 !important;
Instead of
font: arial 8px #666666 !important;
Because CSS Syntax for font property doesn't include the color. Also, margin-top and margin-bottom values don't work with <span> element(unless you give it a float).
Apart from these, I see everything is working fine.
Is it possible to change the font from the <pre> tag? For example, I don't like the courier font, but I do like the consolas font. Hod od I change this in css?
I tried the following:
pre {
color: white;
font: "Consolas";
}
but that didn't work in Firefox/IE...
Thank you!
Yvan
The font shorthand property requires that you specify the font size.
Use the font-family property instead.
font-family should work. try
.pre {
color: #fff;
font-family:Consolas;
}