I have tried to change font size of jqxtree, but nothing worked.
Below are the tries:
Appliced embbed style for jqxtree div
<div id="jqxTree" style="font-size: 8px;"></div>
Appliced css style for jqxtree div
<div id="jqxTree" class="treeClass"></div>
.treeClass{
font-size: 8px;
}
I googled and found that font size can be changble by custom theme. But I am looking for is there any way just change the font size of jqxtree without using custom theme. I know that custom theme is good option but right now my requirement is very small. As just want to change the font size do I need to load such a big js file and assuming may face any other issues and understanding css code bit stuff.
Url for change font size via custom theme: http://www.jqwidgets.com/community/topic/changing-font/#post-22806
Note: loading data via JSON. I looking to fix this issue by css if possible.
Please help me to fix this issue by simple way. Thanks in advance!!
This issue was resolved.
#jqxTree li{
font-size:8px;
}
Please refer the below fiddle,
http://jsfiddle.net/zp5qeqn5/
Thanks to all!!!
Related
Bit of a strange occurrence with my web page, currently trying to resize the font of a facebook like button I have on my website.
Currently the HTML I'm targeting is:
<span id="u_0_3">2.1k people like this. Be the first of your friends.</span>
In the google chrome console adding either of the following will change the font
1.
#u_0_3 { font-size: 14px }
2.
span#u_0_3 { font-size: 14px }
but adding either of these lines of code to my web pages stylesheet has absolutely no effect. No clue how to proceed from here as it works in one stylesheet and not the other?
The reason the styles aren't updating when adding the code to your stylesheet as opposed to in the browser is because you're trying to a stylesheet on an iframe, which isn't possible. You can however add the styles using jQuery or something along those lines.
Try this...
$("iframe#idhere").contents().find("span#u_0_3").css('font-size', '14px');
Ensure that you have added CSS file reference in your HTML.
Also, clear browser cache and load the page.
Studying webpages to learn html/css/javascript
Got confused when I thought that most images were linked to or loaded locally... It seems like on spotify their search button is using something I don't understand to load the magnifying glass.
.spoticon-search-32:before {
content: "\f141";
font-size: 32px;
}
If I edit content the picture of the search button goes away so I know its the content that is responsible for the picture. But where the hell is it loading it from? it's not a .png or .jpg extension either...
They are using a font that contains those icons. I don't know which one they are using but here is another example:
http://astronautweb.co/snippet/font-awesome/
element:before {
content: "\f000";
font-family: FontAwesome;
This loads the icon. Now you only have to apply the css selector on a span or i or something else.
It is something called an icon and it is basically a font which is why a size can be specified to make it larger or smaller. I suggest looking at Font Awesome to get a better understanding.
I'm trying to create an iframe target structure, but I'm having some trouble. I can't give an example of the code here, because it just turns into the actual iframe. The problems I've been having are with the font size. I'm using font size="18" but it doesn't work. I've also tried several other methods. The code I use for font color works, so I don't know how to specify the font size. I also want to use a background color on my link to make it appear more like a button but I haven't been able to find a code for that. I'm a beginner and don't know much about coding so be patient with me. Thank you.
If you can modify the iframe source.
You can do it in css like this
.class {
font-size: 18px;
}
or as inline css
<p style="font-size: 18px;">Text here</p>
I have been searching for an answer for this for an hour now with no luck.
I am centering text vertically inside the box using the "line-height" CSS property. This is working fine with standard safe fonts and also works fine for ""#font-face"" font embedding on Windows.
On the Mac however, there is a problem with this centering using "#font-face". See: http://cl.ly/QBlE/o
I don't know what to do with this. The only way to fix this to use different line-height for Mac. But as far as I know this is not possible without JavaScript or server side programming and does not seem to be the proper solution for me.
Example (blue box at the top):
#header .login {
text-decoration:none;
margin:11px 9px 0 9px;
float:right;
font-size:11px;
color:#fff;
background:url(../img/header-login.png);
width:118px;
height:26px;
line-height:26px;
padding:0 0 0 10px;
text-transform:uppercase;
font-family: 'Helvetica55', Sans-Serif;
}
Instead of using different line heights, try using the font-size-adjust property with a value of auto.
From the W3C:
In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.
First, try setting the line-height from px to em.
If that doesn't work, then it could be caused by default styles that are different for each browser. Those default styles could be messing with your styles. So try to use a reset.css in your page.
The problem most probably lies in the used font. Each font has its own metrics and when not optimized properly they can differ from one platform to another. See http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ for a better explanation of this.
You could try to alter the font yourself using a tool like http://fontforge.org/. This isn't easy though and takes some trial and error to get it right. It may also violate the license of the font you're using.
My advice: choose a font that is better optimized for use on the web. Take any font from Typekit or the like and i bet you get more consistent results.
Perhaps 'vertical-align:' may help,
please check this fiddle
this will explain the difference, I think every browser have different default value,
here I have created 4 different span tag to show the top, middle, bottom, and default(unassigned) value of the vertical align value,
Please change values if that helps,
as you are using images in the button, please verify the image are set with 0 0
i.e background:url(../img/header-login.png) no-repeat 0 0;
this will render the image from the 0 left and 0 top that will help you idnetify if and image is not properly generated..
Please reply if problem not solved..
From my experience for multi browser and multi platform websites you should really drop the pixels in fonts and start using ems.
Here's a useful convertion table tool:
http://pxtoem.com/
Let me know if it still happens using em. Keep in mind also that different fonts have different behaviors and the default (base) size may differ too. If you want to make sure it is exactly the same size, appart from using 'em' you should also use an openType font and embbed it into your CSS, having exactly the same font and size in any screen or browser.
Operating systems may render fonts different ways. One can start from bottom and other can start from top as their algorithm different. If the problem was CSS, it wouldn't be resolved by another type of font.
I found another question similiar to your one, you can check if it works for your situation:
Mac vs. Windows Browser Font Height Rendering Issue
I try pixel fonts from http://www.fontsquirrel.com/fonts/list/style/Pixel but It's not perfect in the browser and disable anti-aliasing is not an official CSS property (or don't find good sample).
I found this old question : Is it possible to disable anti-aliasing in CSS when using #font-face with pixel fonts?
And this JS http://devpro.it/pixelfont/ look very nice but default font is to small (make my own font is not a good deal).
So I would like to know if there is something new or others tips (without swf).
Here is a test with font-face (on webkit, firefox don't ?) : http://b4d455.fr/font/
This might do what you want to some extent:
font-smooth: never;
-webkit-font-smoothing : none;
I know I'm late, but Small Font lets you use this gladly.
Here's some working CSS with no links required:
body {font-family: "ＭＳ Ｐゴシック";}
<!--- Here's some HTML for the example --->
<h4>Small Font</h4>
<p>Small Font is a pixel font used by Windows when a font is too small to be displayed</p>
<h5>Recommended CSS:</h5>
<code>font-size: 75%;</code>
I'm not really sure what you're asking. But if you're looking to disable anti-aliasing, you might be able to use -webkit-font-smoothing: none;.