I am using CKEditor on a webpage.
Quite impressive but I have few very annoying issues I hope you can help me overtake.
1) When the editor is created by Javascript the default font size (12px, I guess) is too small for my7 needs. I would like the font size to be 18px as the user starts typing on a new document.
2) I can change the font size of a block of text by selecting the block of text and then using the combo for the font size. What I can't do is set the combo for the font size (i.e. to 30px) and then type at that size. I think I can do the latter on Microsoft word, for example.
Thanks,
Dan
Pretty easy guys,
open 'ckeditor/content.css', edit this part :
.cke_editable
{
font-size: 21px;
line-height: 1.6em;
font-family:'me_quran' //example font
}
If you are using the default styles, then you must change it at:
Providers\HtmlEditorProviders\Fck\FCKeditor\editor\css\fck_editorarea.css
Just change the style:
body, td
{
font-family: Arial, Verdana, Sans-Serif;
font-size: 12px;
}
Does thi help?
Source
Related
My font is doing something weird. There seems to be space being added below the font (Not the margin) that is pushing it up above the line-height. If I adjust the height it seems to be anchored to the bottom of the line height so instead of increasing the space below it actually pushes the top of the font above the line height. Is there any way, save adding margin or padding to the top, to make sure it's anchoring to the top of the line-height or middle?
CSS:
#font-face {font-family: 'AvenirLTStd-Book';src: url('/us/_media/font/2CA9EF_0_0.eot');src: url('/us/_media/font/2CA9EF_0_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_0_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_0_0.woff') format('woff'),url('/us/_media/font/2CA9EF_0_0.ttf') format('truetype');}
#font-face {font-family: 'AvenirLTStd-Black';src: url('/us/_media/font/2CA9EF_1_0.eot');src: url('/us/_media/font/2CA9EF_1_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_1_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_1_0.woff') format('woff'),url('/us/_media/font/2CA9EF_1_0.ttf') format('truetype');}
h1,h2,h3,h4,h5,h6 {
font-family:'AvenirLTStd-Black', Arial, sans-serif;
margin-top: 0;
font-weight: normal;
line-height: 1em;
color: inherit;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
letter-spacing:1px;
}
I know this is old, but I thought I'd leave a comment for others Googling this issue.
It looks like you are using Avenir from MyFonts.com, which allows you to 'tweak' your webfont package.
I had the same issue as above, changing the Line Height Adjustments to use Bounding Box (Match the bounding box of the glyphs, line gap will always be 0) fixed the issue
I used the settings in the screenshot below:
[link to screenshot is down]
The idea is to increase line-height to decrease the space at the baseline, i.e.:
h1 {
font-size: 2rem;
line-height: 3rem;
}
I was on this for a while now and since I have no Myfonts.com account and the font is free font generated by FontsQuirrel or downloaded from GF I had to experiment. In PS my font looks correct by comparison,
Montserrat vs Open Sans
But webfont is completely off.
I was than forced to test several font editing software. First I tested FontForge and could simply not figure out the proper metrics, than i got trial FontCreator that has this great feature that auto calculates the metrics which when entered in FontForge fix the issue.
But paying $79.00 min to just fix this and never use the software again did not seem feasible and I also did not want to go back and forth between the two to get the metrics. I continued to play with FontForge and finally found the solution. You must reset all values to 0 in Element -> Font Info -> OS/2 -> Metrics and than uncheck the "Is Offset"
Instead another image here is short video that shows how to fix this
http://take.ms/rJpqh
Note that for some fonts it is better to uncheck the Really use Typo metrics which helped in my case.
The attribute you have missed out is 'vertical-align' and it is probably causing all of the trouble
This tells the browser where to align the text
It has the following values (not all are listed):
baseline
sub
super
middle
top
bottom
To find out more click here
I'm trying to make a special floating text around an image. It has to look like this
Open image here
Text can vary in size. Image has a fixed size.
How do we set this up in CSS? Is it even possible?
I'll take a scripted solution if there is one (all though I can't see anything helpfull in that department myself...)
Thanks a lot in advance :-)
Jan
You just need to float: right your image:
img { float:right; }
DEMO
Here's a fiddle showing how to do it: http://jsfiddle.net/4q3um/
img {
float:right;
margin:0 0 20px 20px;
width:100px;
}
i have this simple html and css http://jsfiddle.net/JVfVv/1/
Problem is the text is being cropped under safari/chrome/firefox on mac. Removing overflow: hidden corrects the problem, however this line is necessary for other reasons. Removing line-height: 1; appears to fix the problem, however i get this from my reset stylesheet, and I don't understad why having it causes a crop.
Can someone explain why this is happening, and how to fix it please? thanks
To answer the question of why this happens, I think the key is this particular phrase from the Fonts section of the CSS 2.1 spec (emphasis mine):
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.
The line-height: 1 declaration sets the height of the paragraph to the same height as the font-size (since the paragraph only has one line). The fact that some characters are cut off implies that their glyphs bleed outside their em squares (I don't know how to definitively prove that this is true; I'm just speculating based on the evidence).
As for a solution, the most straightforward solution would be to use a larger line-height setting, such as 1.1 or 1.2.
You can set the height in CSS which solves the problem?
p {
line-height: 1;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
height:32px; /* this appears to solve the problem */
}
See: http://jsfiddle.net/JVfVv/4/
I have implemented a font in css with #font-face, and its looking way fatter when loaded in Safari. Does anybody know what can cause this?
#font-face {
font-family: 'SerifaBold';
src: url('/css/serifbol-webfont.eot');
src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/serifbol-webfont.woff') format('woff'),
url('/css/serifbol-webfont.ttf') format('truetype'),
url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
font-weight: 100;
font-style: normal;
}
Your font-face rule is telling the browser that this is an ultralight font (the font-weight: 100 part). Then you're presumably asking the browser to use this font for text that has normal weight (font-weight: 400) or is bold (font-weight: 700). The browser sees that it's got an ultralight font (because you told it so) and needs a normal font, and it does what's called "synthetic bolding": artificially making the letters bolder by drawing them several times with a slight offset.
There is no standard for synthetic bold, and the default behaviors of browsers differ.
If you're trying to use this font for bold text, and it's already a bold face, you should say so in your font-face rule, using the font-weight descriptor.
When using web typefaces with "font variations" including different weights and/or italics included in the font family, always apply "font-style: normal" & font-weight: 400; (or font-weight:normal) to each style declaration. Make sure to explicitly declare each font-family differently for each variation:
EG: I'm using Helvatica Neue from fonts.com
strong, b {
font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
font-weight: 400;
}
em, i {
font-family: 'HelveticaNeueW01-56It', Arial, sans-serif;
font-style: normal;
}
Firefox will "help out" your fonts by faux-bolding & faux-italicizing your nice #font-face type making them really ugly and ruining all the hard work the designer did in creating the fonts.
This applies to all sources of fonts including typekit, google, fonts.com and locally hosted fonts.
I've found the same thing happens. Its almost as if its an entire weight above what it should be. Maybe try with the non-bold version of the font as a starting point?
The same problem on my client's website had driven me crazy, but I finally found the problem. When you call 'SerifaBold' in any of your CSS class, make sure that you also put font-weight: normal;
That finally solved the problem for me.
If given the following code from the CSS:
font-family:SpecialBold;
font-weight:bold;
Firefox double bolds (it bolds already bold type). This does not seem to be an issue in Safari, Opera or Chrome. I can't just remove font-weight:bold; because if something happens to the hosted typeface, the default typefaces won't bold.
The issue I'm facing is trying to use at #font-face with non- web-safe typography. The typeface I'm using has a specific bold font. In Chrome etc., the following won't work:
font-family:Special;
font-weight:bold;
beceause the Special typeface can only be bold if the SpecialBold typeace is being used.
How do I make it so that Firefox doesn't double-bold already bold fonts? Or, vice-versa, can I make it so that Chrome etc. uses a bold typeface when font-weight:bold is used?
You can use this rule to tell the browser that SpecialBold is already bold so that synthetic bolding does not need to be applied:
#font-face {
font-family: SpecialBold;
font-weight: bold;
src: local(SpecialBold);
}
Might need to be modified depending on exactly what your font faces are called, of course.
#font-face {
font-family: Special;
font-style:normal;
font-weight: normal;
src: local(Special);
}
#font-face {
font-family: Special;
font-weight: bold;
font-style:normal;
src: local(SpecialBold);
}
So you can use the same font-family name and change the weight with font-weight instead of using two different font names. Be sure to add the URL of the font on your site in case your users don't have it!