I have the following CSS on my
h2 {
font-family: Arial, Verdana, sans-serif;
color: #fff;
text-shadow: 0 6px 0 #E5E5E5
}
The problem is that this looks good only on some font-sizes, in others it looks really bad. If the font is really big the shadow is barely noticeable, if the font is too small the shadow makes the text unreadable. In my webpage the font of this particular element changes sizes dynamically. It can be as small as 10px and as big as 200px.
For some reason setting the shadow position in % do not work, one would hope it would take a % of the font-size attribute.
So I'm asking here if there is any way to make text-shadow works on fonts that changes size using CSS alone. I'm hoping for a solution that doesn't use javascript.
You can use em instead of px in the text-shadow and em relates to the actual set size of the typeface.
Examples on w3.org
Understanding em
see
http://rcljr.com/rcl/tests/TextShadow%20Supreme/index.html
for a text shadow formatter
Related
I am looking for a way to underline heading that has more than one line, gradient background [EDIT - background image that is not solid color, but gradient], ignore descenders (so border-bottom is not a solution) and that it will look good in Chrome (simple text-decoration: underline is very thick in Chrome).
I have checked all solutions mentioned here: https://css-tricks.com/styling-underlines-web/ but nothing there solving my problem (exept "avoid using an underline altogether" :)).
And as far as I now, Chrom still doesn't support text-decoration-thickness
The requirement to ignore descenders means that one is more-or-less forced to use CSS text decoration because who else knows where there are descenders? The alternative might be to have span around every character with different formatting, not really practical.
It transpires that Chrome will support text-decoration-thickness but only with certain conditions. From https://caniuse.com/?search=text-decoration-thickness:
The text-decoration-thickness property does not work unless either
text-underline-offset is set to something other than auto or
text-decoration-color is set to something other than currentColor. See
Chromium bug 1154537
It is therefore possible to control the underline thickness. It is more problematic trying to get the Chrome and Firefox implementations look exactly the same from the point of view of offset (FF seems to place underline by default further down than Chrome) and the two browsers do not treat descenders exactly the same way. Hopefully setting the thickness and tweaking the offset will result in an acceptable heading.
Here's an example
div {
font-family: Arial, Helvetica, sans-serif;
font-weight; 400;
font-size: 3em;
width: 300px;
text-align: center;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: black;
text-underline-offset: 0.1em;
}
<div>To jest kryzys ekologiczny i klimatyczny</div>
Is it possible to make dotted text with css?
I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having the user to download a whole font might be overdoing it.
The idea that I had was to overlay the text with a pseudo element with a background pattern of small transparent circles with a white background.
Some thing like this:
<div class="dottedText">Some dotted text</div>
FIDDLE
CSS
.dottedText:after
{
content: '';
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, transparent 50%),
radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
background-size:4px 4px;
}
I think I might be close, but the above solution won't work properly if you change the font-size.
I'm looking for a solution where
1) The dots will increase in size as font-size increase, and
2) preferably each letter should only be shown with only one single line of dots - not the double line as it is now.
Edit: When I say one single line of dots - I mean that each stroke should be made up of only one dot. For example: In the above picture notice that the 'm' char has 2 columns of dots....well I would prefer only one.
Ideally something like this (taken from here):
(I'm not sure, but possibly the radial gradient needs to be tweaked to do this)
Edit:
1) I don't mind which font is used - so long as it's a built-in font. (Even a monospace font is ok)
2) The solution need not work in every browser. (So a webkit only solution will be fine)
To be honest, this answer may sound funny or weird, but am not sure whether its possible with CSS ONLY (As you haven't tagged any other languages), even if its, it would be an overkill to do so, and hence it makes sense in using a dotted font instead of writing too many lines of CSS.
Even if you rule out IE, you will have only single .woff file which I think is very much normal, as it will increase your http request by one, and surely it won't be over bloated much as you think.
List of cool dotted fonts can be found over here. Convert the ttf,using Font Squirrel Service.
Make sure you have permission to do so.
Demo Fonts used : Dotline
(Files are hosted on my own server, enabled CORS because the demo failed on Firefox)
If you are not looking to support crappy IE, only file you will need is woff and that's merely 23kb
Even if it relies on SVG inline styles , here's what I came with:
<svg xmlns="http://www.w3.org/2000/svg"
width="1450px" height="300px" viewBox="0 0 800 300">
<text x="2" y="155"
font-family="'Lucida Grande', sans-serif"
font-size="222"
stroke="red"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="5,5"
fill="none">
Some dotted text
</text>
although for some reasons the stroke-linecap isn't working..
If you want to play with a working fiddle check this .
EDIT-1 (moving svg-styles to CSS)
svg{
width:1450px;
height:300;
viewBox:0 0 1500 300;
}
text{
font-family:'Lucida Grande', sans-serif;
font-size:152px;
stroke:#000ece;
stroke-width:3px;
stroke-linecap:round;
stroke-dasharray:1,1;
fill:none;
}
<div class="dott">
<svg xmlns="http://www.w3.org/2000/svg">
<text x="2" y="155" >
Some dotted text
</text></div>
With a few minor adjustments we can get pretty close:
1) Change font-family to courier new
2) Add a text-shadow with a horizontal and vertical offset on the div
3) Changed units to ems - (like #BDawg suggested)
FIDDLE
div {
font-size: 40px;
font-family: courier new;
position: relative;
text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
background-size: .1em .1em;
}
div + div {
font-size: 60px;
}
div + div + div {
font-size: 80px;
}
div + div + div + div {
font-size: 100px;
}
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
Couldn't you just use the webfont Kit for this font?
http://www.fontsquirrel.com/fonts/BPdots?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y
You would simply link your CSS like so for the font-type you would like:
#font-face {
font-family: 'bpdotsbold';
src: url('BPdotsBold-webfont.eot');
src: url('BPdotsBold-webfont.eot?#iefix') format('embedded-opentype'),
url('BPdotsBold-webfont.woff') format('woff'),
url('BPdotsBold-webfont.ttf') format('truetype'),
url('BPdotsBold-webfont.svg#bpdotsbold') format('svg');
font-weight: normal;
font-style: normal;
}
Then just link whatever element you would to use this font:
h1{font-family: 'bpdotsbold', arial, helvetica;font-size:80px}
Just be sure to upload the webfonts' path to your server and update each url('LINKTOFONT') in your CSS.
There were several other Dot like fonts that font-squirrel has to offer:
http://www.fontsquirrel.com/fonts/list/find_fonts?q%5Bterm%5D=dot&q%5Bsearch_check%5D=Y
Change the background-size to use ems.
For example:
background-size: 0.1em 0.1em;
NOTE: The above change sizes your first example with the font, but does not produce your second example. I would use inline SVG rather than a pure CSS approach if that exact effect is an absolute must. (Or the more obvious approach: change to a dotted font)
Short Answer:
No. Not possible.
tl;dr;
I'm looking for a solution where
1) The dots will increase in size as font-size increase, and
2) preferably each letter should only be shown with only one single
line of dots - not the double line as it is now.
Edit: When I say one single line of dots - I mean that each stroke
should be made up of only one dot. For example: In the above picture
notice that the 'm' char has 2 columns of dots....well I would prefer
only one.
This cannot be done without a custom font.
There are two inherent problems with other workarounds:
There is no text-fill-pattern in CSS. Not even in SVG. There is text-fill-color in both CSS and SVG. However, it is limited to browser-specific implementation and non-standard vendor-prefixes in CSS. Then there is stroke style. It has the same limitations in CSS (as that of fill) of being non-standard, and also is limited only to width and color. Although, SVG adds stroke-linecap and stroke-dasharray, but that is all there is.
text-outline could have helped. If it worked like a border, then we could have done a text-outline: Npx dotted red;. And increase the Npx to virtually eliminate the text-fill. But, there are other problems with that: (1) The specs says, it will work as shadow i.e. with no style. As in text-outline: 2px 2px #f00;. There is no solid / dotted / dashed style option. (2) W3C says that the feature is at risk and may be cut from the spec. (3) As of now, it is still not implemented by any browser as yet. Ref: http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-outline
The only way left out, is to use a background pattern and then make it clip to the text. This is very much what you have already tried in your question.
The problem with the last approach (background) is that the fonts are not same. Not even similar. The glyphs are different. The ascenders and descenders are different. Even strokes on the same character are different.
This can be understood by this illustration:
If you notice the characters in the above sample (Times New Roman font), while the vertical lines have nearly same width, the horizontal lines (the horizontal bar in "e") are narrower. Further, the serifs are also of differing widths and taper towards the end. When a background with a pattern is applied (any mechanism, image or SVG or radials), it will not line-up neatly with the font lines. Because of whitespaces and proportional fonts have varying distances.
Notice the two ts in the above illustration marked in red. Even though the glyphs are same, but depending on the distance from the origin, the background pattern cannot line-up neatly. Thus while the second t has the dots lined up, the first t does not. The pattern visible is shifted partly and hence white space is prominent. The same pattern-shift occurs randomly across the characters.
Notice the taper of the serifs and that of e, as marked in red circle in the above illustration. In the middle, the font is fatter and accommodates more dots from the pattern (some full, some partial). At the serifs and tapers, it gets narrower and the pattern cannot fit. With curves, the dots in the pattern cannot bend, it is after all a grid pattern.
We cannot reduce or increase the individual dots in the pattern to fit with the fonts. And we cannot shift background to line-up across all characters. When you use mono-space fonts, then the proportional distance problem is mitigated to some extent, but the curves still remain and the pattern cannot be lined-up with that.
So, the background technique for this is inherently flawed. The only solution is to use a custom font.
However, if approximations are good enough for you, then your own technique of radial background works well. At least apart from Firefox, your own technique works across other browsers.
I will also attempt to provide one more similar solution. Combining SVG pattern with the background-image and keeping the background-size in percent may work to some extent on monospace fonts at larger sizes.
Disclaimer: This snippet will work only with webkit based browsers (Chrome / Safari), because other browsers don't seem to support SVG as background-image and also -webkit-background-clip: text; is, well webkit dependent.
Snippet:
.dotted {
padding: 0px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2' cy='2' r='2' fill='#f00' stroke='#fff' stroke-width='1'/></svg>");
font-family: sans-serif;
font-weight: 300;
font-size: 32px; background-size: 0.9%;
-webkit-font-smoothing: antialiased;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
div:nth-of-type(2) { font-size: 64px; }
div:nth-of-type(3) { font-size: 80px; }
<div class="dotted">Some dotted text</div>
<div class="dotted">Dotted text</div>
<div class="dotted">More dotted text</div>
This font looks similar to what you are expecting
http://www.fontsquirrel.com/fonts/Synthetique?q[term]=dot&q[search_check]=Y
and it has 4 extensions[TTF,EOT,WOFF,SVG) fonts which is supported in all the browsers
hope this will help you
I'd like to make one of the FontAwesome icons a bit less heavy - it's much heavier than the font I am using. This how it looks presently:
:
Ugly, right? So I've tried resetting the font-weight as follows:
.tag .icon-remove {
font-weight: 100;
}
The attribute appears to be set correctly in the CSS, but it has no effect - the icon looks just as heavy as before. I've also tried font-weight: lighter and -webkit-text-stroke-width: 1px with no effect.
Is there any way I can make the icon less heavy? The docs say "Anything you can do with CSS font styles, you can do with Font Awesome" but I can't figure out how to do this.
Webkit browsers support the ability to add "stroke" to fonts. This bit of style makes fonts look thinner (assuming a white background):
-webkit-text-stroke: 2px white;
Example on codepen here: http://codepen.io/mackdoyle/pen/yrgEH
Some people are using SVG for a cross-platform "stroke" solution: http://codepen.io/CrocoDillon/pen/dGIsK
2018 Update
Font Awesome 5 now features light, regular and solid variants. The icon featured in this question has the following style under the different variants:
A modern answer to this question would be that different variants of the icon can be used to make the icon appear bolder or lighter. The only downside is that if you're already using solid you will have to fall back to the original answers here to make those bolder, and likewise if you're using light you'd have to do the same to make those lighter.
Font Awesome's How To Use documentation walks through how to use these variants.
Original Answer
Font Awesome makes use of the Private Use region of Unicode. For example, this .icon-remove you're using is added in using the ::before pseudo-selector, setting its content to \f00d ():
.icon-remove:before {
content: "\f00d";
}
Font Awesome does only come with one font-weight variant, however browsers will render this as they would render any font with only one variant. If you look closely, the normal font-weight isn't as bold as the bold font-weight. Unfortunately a normal font weight isn't what you're after.
What you can do however is change its colour to something less dark and reduce its font size to make it stand out a bit less. From your image, the "tags" text appears much lighter than the icon, so I'd suggest using something like:
.tag .icon-remove {
color:#888;
font-size:14px;
}
Here's a JSFiddle example, and here is further proof that this is definitely a font.
Just to help anyone coming to this page. This is an alternate if you are flexible with using some other icon library.
James is correct that you cannot change the font weight however if you are looking for more modern look for icons then you might consider ionicons
It has both ios and android versions for icons.
The author appears to have taken a freemium approach to the font library and provides Black Tie to give different weights to the Font-Awesome library.
Another solution I've used to create lighter fontawesome icons, similar to the webkit-text-stroke approach but more portable, is to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
.star-light::after {
content: "\f005";
font-family: "FontAwesome";
font-size: 3.2rem;
color: #fff;
font-weight: 900;
background-color: red;
}
UPDATE: Please note that I am seeing this issue only in Chrome (latest version). Everything seems to be fine in Firefox.
By definition:
The rem unit is relative to the root—or the <html>—element. That means
that we can define a single font size on the <html> element and define
all rem units to be a percentage of that.
Let me explain my situation with an example...
Relevant CSS:
html {
font-size: 87.5%;
}
body {
font-size: 17px;
font-size: 1.21428571rem;
}
code {
font-size: 14px !important;
font-size: 1rem !important;
}
I am using the !important declaration to override the font-size of inline code.
The thing is, I noticed that the font-size of code blocks is much smaller than 14px, most probably 12px. But if I remove the !important declaration and set the font-size on a specific code element (styling a specific inline code element), the fonts-size is nice and fine at what appears to be 14px.
Does you have any idea as to how !important declarations may affect sizing in rem's? (Especially considering in my case.)
First off !important is lazy coding and dangerous to maintainability. It's toxic and breaks the nature of CSS (the Cascading portion). Avoid it at all costs.
Second:
code {
font-size: 14px !important;
font-size: 1rem !important;
}
Might as well be written:
code {
font-size: 1rem !important;
}
The second rule overrides the first (again, the Cascading nature of CSS)
rem stands for root em, which is the font-size of the top level element (i.e., html)
and what your rule is saying 1 x the em of the html element, with is 87.5% of the browser default.
EDIT:
Your <p> tags have a font-size of 100% inherited from the parent element which is eventually inherited from body and body has a 1.2142857rem which is roughly 17px This is why you're seeing a difference in font sizes, which is also exacerbated by the the difference of monospace and sans serif fonts.
Okay, the issue was with (1) font-family not defined for code and pre blocks, which meant Chrome and other webkit browsers chose some monospace font that appears smaller (2) line-height was smaller (almost equal to the font-size).
Fixing these two has solved the problem.
I have no idea why Chrome Dev Tools Web Inspector's "Computed Style" shows 11px as the font-size (also applies to any webkit browser, including Safari). I can confirm that it's showing the wrong value because by changing the font to Arial I could easily tell that it's 14px.
Also, after setting the font-family on code and pre blocks, Chrome now shows the correct computed font-size value.
I'm using a fluid baseline grid template as a starting point for a site I'm working on and am hoping for a pointer on typography. The CSS font-size declaration is set by the grid template as follows:
/* DEFAULT FONT SETTINGS */
/* 16px base font size with 150% (24px) friendly, unitless line height and margin for vertical rhythm */
/* Font-size percentage is based on 16px browser default size */
body, button, input, select, textarea {font: 100%/1.5 Arial, Helvetica, sans-serif; *font-size: 1em; color: #333}
I'm wary of adjusting this setting but if I need the default font to be smaller than this. If I leave the declaration above as is, then set all p, a, ul fonts to be .9em for example, then this (expectedly) results in font sizes decreasing relative to their parent element. I don't think I should be setting the font size in pixels either - so can anyone advise a good solution for this (probably very simple!) issue?
I have just reduced the px down from 24px to 20px seams to work fine, are you using the Drupal theme?, and if so have you got it to work in IE 6-8, it breaks and displays in 1 column see the drupal demo site in IE to see http://themes.arborwebdevelopment.com/fluid-baseline-grid-theme-demo
This is a issue I've been trying to work out for a month now.