After a user visits a link, I want the font-weight of the text to go to normal (400).
.title-link {
font-family: 'Open Sans', sans-serif;
color: #264464;
font-size: 16px;
text-decoration: none;
font-weight: bold;
}
.title-link:visited {
font-weight: 400;
}
I read that you can't do this from around 2010+ (https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/), is there any way I can do it still?
If you are using page links perhaps you could use jquery? The only problem being after a page refresh it would go back to being bold.
html
<a href='#' class='title-link'>Link</a>
jquery
$('.title-link').click(function() {
$('.title-link').css('font-weight', 'normal');
});
Seems to work in this jsfiddle: http://jsfiddle.net/z7kmbve7/2/
Related
When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.
Website: https://dnidomaturypl.netlify.app
Source Code: https://github.com/mbledkowski/dnidomatury
-it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.
It's because how the font were build.
.Poppins {
font-family: 'Poppins', sans-serif;
}
.Poppins {
font-family: 'Jost', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
<h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>
I'm using anchor tags with 'content' set on :before to be : "——";
a.line {
font-size: 21px;
font-family: Khula,sans-serif;
display: inline-block;}
a.line:before {
content: "——";
padding-right: 25px;
font-weight: 400;
font-family: serif;
font-size: 24px;
letter-spacing: -10px;
transition: all .3s;}
Sometimes they render like this:
When they should render like this:
It doesn't happen every time the page loads, and appears to just happen at random. Has anyone encountered this before and found a solution?
Thanks in advance.
Use the Unicode value instead. An em dash is U+2014
content:"\002014";
I'm trying to use this font, Open Sans Extra-Bold:
https://fonts.google.com/specimen/Open+Sans
For some reason I can't get it to show.
Any help?
JSFiddle: https://jsfiddle.net/0hhbgyrd/
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
font-size: 90px;
font-family: Open Sans;
text-transform: uppercase;
}
.normal {
font-weight: 400;
}
.bold {
font-weight: 700;
}
.extra-bold {
font-weight: 800;
}
<div class="normal">
Blog
</div>
<div class="bold">
Blog
</div>
<div class="extra-bold">
Blog
</div>
EDIT: Seems this works correctly in Firefox, but not in Chrome?
Chrome:
Firefox:
Fix the incorrect #import code provided by Google Fonts.
The import code they provide is causing problems for me as well, and it did not have the ' -marks before they updated the whole Google Fonts -page, so they kind of broke the code in the progress of their update.
I sent out a hotfix request few months back when they did not have the code wrapped inside (), which of course didn't work either. They fixed it but left the ' -marks in, so it works for some but certainly not for all.
So remove those ' -marks and it should work just fine:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
instead of
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
I also recommend using the correct font-family markup:
font-family: 'Open Sans', sans-serif;
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
I have a ASP hyperlink in my aspx page. The link is just a text "Click here".
I have seen some effects in certain websites; if a user points his mouse on the link, then the link will zoom a bit larger in size. When the user moves the mouse pointer away from the link, the link returns back to its original size.
How do I achieve it? Is it done using CSS?
I have attached my existing CSS here.
<style type="text/css">
.style1
{
font-size: large;
font-weight: bold;
font-family: Arial;
}
</style>
you can acheive this using css selectors http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes targeting the hover pseudo class to apply a new style when the mouse hovers over the link
go to google
<style>
a { font-family: Arial; }
a:hover { font-size: large; font-weight: bold; font-family: Arial; }
</style>
.style1
{
font-size: large;
font-weight: bold;
font-family: Arial;
}
.style1:hover
{
font-size:larger;
}
There is a CSS hover property
example (more info)
a:hover
{
background-color:yellow;
}
You can also use javascript and the mouseover property of the a tag