I have a weird problem with my font,i have used font-face in my css code
this font work correctly in my ie browser bu my head bar
but when i change font to english everything work correctly as you can see below
as i said that font work correctly in other part of my website
my css code is below
margin-right:15px;
color:white;
background-color:#75b925;
border:1px solid #649a24;
background-image:-moz-linear-gradient(-180deg, #83CD2B 0%, #7EC826 100%);
background-image:-o-linear-gradient(-180deg, #83CD2B 0%, #7EC826 100%);
background-image:-webkit-linear-gradient(-180deg, #83CD2B 0%, #7EC826 100%);
box-shadow: -1px 2px 4px 0px rgba(0,0,0,0.16),inset 0px -2px 7px 0px rgba(0,0,0,0.1),inset 0px 2px 0px 0px rgba(255,255,255,0.3);
text-shadow:0px 1px 2px rgba(0,0,0,0.24);
-moz-transition:box-shadow 0.3s;
-o-transition:box-shadow 0.3s;
font-family:fanwood,tabassom;
-webkit--transition:box-shadow 0.3s;
-webkit-text-shadow:0px 1px 2px rgba(0,0,0,0.24);
padding:6px;
font-size:17px;
border-radius:10px;
i have changed many font related settings like font-weight font-size etc but nothing changed
#font-face{
font-family:"tabassom";
src:url("/fonts/farsi/BTabassom.eot?#") format("eot"),
url("/fonts/farsi/BTabassom.woff") format("woff"),
url("/fonts/farsi/BTabassom.ttf") format("truetype");
}
i just set display:inline-block and everything got rounded...!
Related
I have some outlined text on a website, but the text is now appearing weirdly for some reason. Have a look at the image link below for additional detail.
Specs:
WordPress 5.8.3
Elementor / Pro 3.5.3 / 3.5.1
Font: Sinkin Sans
Here's the code (no h1 in real code)
.cleartext {
color: #000000;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
}
.gbtext {
font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>
This is what I'm seeing:
the font lines are entering the space that should be transparent
It was the font, Sinkin Sans. It's not compatible. Changing it to Helvetica fixed it and it's close enough to Sinkin that most people probably wouldn't notice.
helvetica is a bit narrower and the periods/dots are squared, but not bad
It's because of the font. You cannot do probably anything and strokes on this font will be like on your img. But if you use text-shadow instead of -webkit-text-stroke, it's hack a little bit, but it should work. The main cons is that the text cannot be transparent, because of shaddows, they will be visible, so you must set color of the text.
.cleartext {
color: #fff;
text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000;
}
.gbtext {
font-weight: 700;
}
<h1><span class="cleartext gbtext">It's clear</span> when you blah blah blah.</h1>
I have read about text borders here:
CSS Font Border?
In that post, they are using font-shadow to make the border, but I cannot remove the shadow colour, and I only need the border because I need to show a picture behind the space between the text and the border and create some space between the text and the border.
This is what I am trying to achieve:
This is what I have done so far (it is incorrect because the border is connected with the text):
<style>
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
<h1>Hello World</h1>
Sorry if you cannot understand me, what I mean is that I need a border around the text with transparent space, but I have no idea how to achieve this.
I also cannot use image as replacement of text .
What you're asking for is not possible. Especially the requirement of making an outer border of transparency. While box-shadow has an inset property, text-shadow does not. Background clip can create some interesting effects in conjunction with text-shadow but nothing like what you're looking for.
span{font-size: 300px;
font-weight:bold;
font-family: Arial, 'sans-serif';
background-color: #ed5c65;
color: transparent;
text-shadow: 4px 4px 4px rgba(255,255,255,0.3);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<span>M</span>
https://jsfiddle.net/3ttgv3ng/
We just need to manipulate css in a correct way.
I have prepared a jsfiddle here.
You're welcome.
#text{
font-size:30px;
font-weight:100;
font-family:arial;
color:black;
position:absolute;
left:4px;
top:7px;
}
#borders{
font-size:40px;
font-weight:900;
font-family:arial;
color:white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<div id="text">M</div><div id="borders">M</div>
Check This!
h1 {
font-size:80px;
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px black;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:
3px 3px 0 #000,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
<h1>M O H A N</h1>
Right now I am using an anchor tag to generate a question mark for the help icon. Looks like this
But I want the question mark to look like this:
I'm not exactly sure how I can style it with CSS to look like the 2nd one. How do you create a background that's 1) a circle and 2) has a gradient?
You can do it with css like this.
a {
color:#fff;
background-color:#feb22a;
width:12px;
height:12px;
display:inline-block;
border-radius:100%;
font-size:10px;
text-align:center;
text-decoration:none;
-webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}
?
But Quentin are right that is a graphic problem not a programmer
Hi in my code box shadow is not working properly for i-e 8
here is my css
.lt-ie9 .imageonHover:hover {
box-shadow:1px 1px 5px 5px #E7E0E7;
border-radius:3px;
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=3),
progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=3),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1);
}
.imageonHover:hover {
width:100%;
height:100%;
position: relative;
border-radius:3px;
box-shadow:1px 1px 5px 5px #E7E0E7;
-webkit-box-shadow:1px 1px 5px 5px #E7E0E7;
-moz-box-shadow:1px 1px 5px 5px #E7E0E7;
}
When i hover on div , the text is also showing shadow.On other browsers it is working fine but on ie 8 it is not working
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
I use this in my CSS:
text-shadow: 1px 1px 1px black;
Text on IE:
Text on Firefox:
and here Fiddle
How can I let it work on IE too? thanks.
USE MS-Filter..
p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
filter: glow(color=#0000ff,strength=3); /* IE */
//alternative
//filter: dropshadow(color=#ffff00,offX=5,offY=5);
}