This is the complete design I'm going for:
And this is the code: http://jsfiddle.net/rlesko/f3R7r/4/
A couple of questions:
Why doesn't a code margin-left do nothing when changed for the object #date?
Do you know of a code that I can use to center a #separator object on a .post-bg (the white background)? I used margin-left for that in my CSS.
How can I align the <h2> text's right border to the <p> text's right border but keep the <h2> text alignment to the right?
Why doesn't a custom font code work for this fiddle?
lots of points are best put into separate questions, but anyway...
It does work! Margin is set to 550px to prove
You can use margin: 0 auto; on the separator element to center it. See here.
Use text-align: justify; for your desired text alignment on both sides. See it here.
I think it has to do with not being able to serve fonts cross-domain. But I am not 100% sure.
The margin works, but the h5 is weird and the appropriate margin to place it like you want to is : margin: 0 0 0 135px; (tested in firebug)
margin: 0 auto;
text-align: justify ?
Because media fire makes a redirection and transforms your url into : http://www.mediafire.com/?f9selsldbgm6dnw and then only you can dl the file. This is not a real direct download, that's why your font won't work. Upload it on you own domain for example.
Try this one instead : http://www.amws.fr/Univers.ttf
Edit : I'd also suggest using a complete #font-face code, so that all browsers support your css well :
#font-face {
font-family: 'LiberationSansRegular';
src: url('http://www.amws.fr/Univers.eot');
src: url('http://www.amws.fr/Univers.eot?#iefix') format('embedded-opentype'),
url('http://www.amws.fr/Univers.woff') format('woff'),
url('http://www.amws.fr/Univers.ttf') format('truetype'),
url('http://www.amws.fr/Univers.svg#LiberationSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Related
So I use this webfont called Gagalin (Regular) on a design of mine and it works fine in Chrome and Edge. However, when I look at it in FireFox I get a very strange vertical misalignment (image below). Also the #font-face rule I use has always worked before (also in FireFox) just not with this font because the other webfont I'm using is aligned correctly. Any ideas on how I could fix this? I am assuming it has something to do with the font or?
EDIT maybe this is not the best place to ask but I don't really know where else to
CODE
I have magin, padding and line-height reset set + I have normalize.min.css included with h1 margin reset by me explicitly to 0 to override the normalize margin. Also the line-height for the header h1 is set at 1 again.
Dropbox link to the font files
#font-face {
font-family:'Gagalin';
src:url(../fonts/gagalin/Gagalin-Regular.eot);
src:url(../fonts/gagalin/Gagalin-Regular.eot?#iefix) format('embedded-opentype'),
url(../fonts/gagalin/Gagalin-Regular.svg#Gagalin-Regular) format('svg'),
url(../fonts/gagalin/Gagalin-Regular.woff2) format('woff2'),
url(../fonts/gagalin/Gagalin-Regular.woff) format('woff'),
url(../fonts/gagalin/Gagalin-Regular.otf) format('opentype');
font-weight:400;
font-style:normal
}
* {
display: block;
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 3vm;
font-size: 3vmin;
line-height: 1.5;
}
h1 {
font-family: 'Gagalin';
margin: 0;
}
header h1 {
line-height: 1;
}
UPDATE
Tried removing all fonts but the woff ones and the issue remains the same
#font-face {
font-family:'Gagalin';
src:url(../fonts/gagalin/Gagalin-Regular.woff2) format('woff2'),
url(../fonts/gagalin/Gagalin-Regular.woff) format('woff');
font-weight:400;
font-style:normal
}
IMAGES
Right for those who want to know I was able to fix this by opening the font in Birdfont , exporting it and reconverting it. I don't really know why Firefox was messing it up whereas the other browsers didn't have a grudge with it but it is working now.
Thanks for your time and answers
Looks like a different default line-height.. Setting the line-height explicitly could fix this. Any chance we could see your code, to verify this?
Same goes for margin and padding. I see an explicit margin of zero, but I see no explicit padding of zero.
Note that the rules at Stack Overflow require you to send some code, so we can test/reproduce the problem.
Try removing all fonts, or all fonts but woff or woff2 to see if it is a font inconsistency/baseline problem.
I have a simple svg (drawn by me in illustrator), which I am trying to convert to a webfont (together with other svg's). When I open an svg in an editor I see it correctly (black pawn shakes a hand with a white pawn). The same way if I am converting it to png.
But after I converted it to a webfont with grunt webfont
webfont: {
icons: {
src : 'path/svg/*.svg',
dest : 'path/fonts',
destCss : 'path/css',
options : {
autoHint: false,
font : 'icons',
hashes : false
}
}
}
But in the webfont it looks really strange (everything is transparent except of the outline)
Here is an example of my webfont and css generated for it:
#font-face {
font-family: 'icons';
url('font/icons.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'icons';
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon_draw:before {
content: '\f103';
}
I have high belief that the problem is with my svg (all other fonts look nice: some of them are mine and some taken from other sources). But I have no idea what is wrong.
P.S. I tried to include all relevant and not relevant details, but if you need something else (or I forgot something else) please let me know.
I am not familiar with grunt-webfont, so the following is just an educated guess.
SVG defines that the fill property defaults to black. Your black pawn has no defined fill, so it is defaulting to black when rendered in a proper SVG renderer.
However my guess is that the SVG to webfont converter utility does not appreciate that rule and is only looking at the properties defined on the shape itself. If I am right, explicitly setting the fill to black on the black pawn body shape may fix your problem.
Also I noticed that the way you have done the arm of the black pawn is a little strange. You have made a piecemeal shape and filled it by drawing a whole lot (25 by my count) of thick short strokes. Font renderers expect glyphs to be defined using closed filled shapes. Not doing it that way may cause problems. Ideally the arm should be a single filled shape. On the other hand, it may work perfectly fine.
http://www.alecos.it/new/125027/125027.php this link is an example of my problem... I used a png 1x16 for drawing the rows... the rows are visible in the link posted... my question is:
why under IE 6/8, FireFox, Opera, Safari and other browsers the rows are perfectly aligned with the text while under IE 9/10/11 the text do not fit in the rows?
I used a simple css:
/* Style Source Code */
.code {
border-radius: 7px;
border: #6666FF 1px solid;
background-color: #FFF5EE;
background-image: url("../bkg/Bkg_116.png"); /* Horizontal Rows */
background-repeat: repeat;
background-position: 0 10px;
}
/* Style Source Code */
.xcode {
color: #008000;
font-family: 'Courier New', Courier, FreeMono, 'Nimbus Mono L', monospace;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
/* Style Div */
.alignment {
line-height: 20px;
text-align: justify;
}
Hope in workround to fix the issue...
here there is my css: http://www.alecos.it/css/alecos.css
I'm not on Windows machine right now but my guess is .xcode(line-height:16px;} would solve your problem, but I must say that this is the wrong way of creating row borders. Why not add:
.xcode td{border-bottom:1px solid #ddd;}
instead of using background image?
Firefox is temporarily outdated unti it's next update meaning that it's browser does not have the ability to process codes in the same manner as other browsers.
.alignment {line-height: 20px;}
Gets over ruled by .xcode line-height normal;
IE aint normal ;)
Besides content tages like h1, p, font all have slightly different margins/paddings around them. So a non responsive img isnt the best way to go.
Would be better if you could wrap each line with a span, div or sinces its a table a tr,td and give those a border-bottom.
Gr.
Kevin
In order to make your text inside .xcode aligned with the horizontal lines, the "code" lines must be distributed vertically. Unfortunately, It seems that you did not understand the meaning of line-height property and use the default value without considerations.
The line-height property
As you can see, the line-height property will decide how much is the distance of two lines of text. In your case, we need it to be exactly 16px inside the whole block of .xcode.
The value of normal value of the line-height property
From the W3C CSS spec, the value of normal value is defined as:
Tells user agents to set the used value to a "reasonable" value based
on the font of the element. The value has the same meaning as
. We recommend a used value for 'normal' between 1.0 to 1.2.
From some online resource like this article or this page, you can see that the real value of normal value depends on many arguments like font size, font family, OS, user agent, ... Therefore, it is recommended that you should use some css normalize stylesheet to set the value of line-height correctly and cross-browser.
About your case
The quick fix here is setting the line-height inside the .xcode class to be 16px (which is the height of the of your background image).
I'm using the bootstrap affix js plugin and it works great. The problem I'm having is when I change the body to use a custom font (Google: Lato) it throws the anchor positions completely off.
The affix links lead to bad positions on the page and the page no longer lines up with the affix sidebar when scrolling. It's always off by 100px or so.
ie.
body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }
I'm sure there's another way to compensate for the new smaller font or line-height, but I haven't found it.
If I raise the line-height on the entire body to say 300, it works ok, except that the spacing is horrible. So I tried to adjust the line height on only the titles holding the anchors.
h2 .mw-headline { line-height: 330%; }
And it almost works, except it's still off on the first link and it feels kind of hackish. I'm sure there's a proper way to handle this, I'm just not sure what that is.
You can probably fix this using Bootstrap's custom variables if you're using less or sass.
In your case it'd something like:
#baseFontFamily: 'Lato', helvetica, arial, sans-serif;
#textColor: #221e1e;
#baseLineHeight: 20px;
Find more variables here: http://twitter.github.com/bootstrap/customize.html
I use custom font in my CSS with this method:
#font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot');
src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.gabriola {
font-size: 20px;
line-height: 20px;
height: 20px;
background: red;
}
<div class="gabriola">Some texty text here</div>
Each browser renders this fonts by it's own way with vertical offset top and bottom like this
What am I doing wrong? Thanks
I know it's been 5 years since the OP asked the question, but I found this great technique on getting text baseline-aligned correctly.
Basically, the text container must be an inline-block with line-height: 0;
Then, you create an inline-block pseudo-element and set its height according to the line-height you wanted:
span {
font-size: 2em;
background: red;
}
span.baseline-align {
vertical-align: baseline;
}
span.true-baseline-align {
display: inline-block;
line-height: 0;
}
span.true-baseline-align::after {
content: '';
display: inline-block;
height: 1em; // this is where you control line-height
}
<span>Normal text</span>
<br><br>
<span class="baseline-align">With vertical-align: baseline</span>
<br><br>
<span class="true-baseline-align">with trick to really baseline-align</span>
http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/
It's possible there is not anything you are doing wrong. Here are some points that may apply, some controllable by you, some not.
Just to be sure, explicitly set vertical-align: baseline.
The different files (.eof, .woff, .ttf) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.
Not sure if having two src calls is messing things up, but you can try eliminating the second one:
#font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot'),
url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
These are all mere guesses. You will have to test #1, 3. If the issue is #2, I'm not sure there is an elegant solution.
There is, of course, the caveat on this site:
Keep in mind that font rendering can vary widely across browsers and
operating systems. Many developers have experienced such poor results
from Windows and Internet Explorer that they avoid using custom fonts
altogether. Always be sure to examine your results closely on all the
browsers that you can to decide if the quality is acceptable.
Update
This post gives some tips about possibly resolving rendering issues. This is for Font Squirrel, and he specifically notes:
If you downloaded the kit, you might try regenerating the font with
the generator. We make periodic adjustments to the generator that
might improve the hinting or rendering of the font.
But he also confirms,
Not to pass the buck, but the most common cause is a bad original
font.
Which goes with my point #2.
I had the same problem and the solution was to reconstruct the font with the properties of the original without changing anything in a new file with Hight logic font creator, the font is unchanged and equal to the original problem is corrected and aligned to the perfection in all browsers including ie6, was the work of a few hours but this is the result in case you need some user.
http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip
This is the solution if anyone has the issue and do not want or cannot reconstruct the font:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/ascent-override
This prop will adjust the vertical ascend property when the font is imported.