I'm having trouble with text glyphs getting clipped in angular material input lables. I have a custom font override happening that seems to be the source of the issue (if I set the font back to roboto the font no longer clips).
$custom-typography: mat-typography-config(
$font-family: 'Open Sans, sans-serif'
);
For context it was also clipping in the input text fields but I was able to fix that with this rule:
input.mat-input-element {
height:100%;
}
Has anyone come across this problem?
This seems to be an issue with Open Sans itself, see: https://codepen.io/winkerVSbecks/pen/jZKbze
font-family: "Open Sans", sans-serif;
height: 18px;
font-size: 16px;
padding: 0;
When input has padding 0 and the difference between height and font-size is less than 4px it seems to clip the text. I have no idea why it does this, but at least we know that this is not an issue caused by ng-material.
I work at Google on the Google Fonts team, and I've filed this at https://github.com/google/fonts/issues/1457 to track its resolution
Related
I am using react-monaco-editor.
In the global css I set a font family, for example Helvetica, Tahoma, Arial, monospace.
At the same time I have an editor instance on my page that I want to use another font, like "Fira Code", monospace. I set it in the Editor's Optional. The editor shows this font.
But at this point there was a problem, the editor was using a global font when measuring the width of the font. So the error occurs when renderWhitespace and display indent indicator.
I tried to use monaco.editor.remeasureFonts() in Hook or before rendering, but it didn't work.
I think it has something to do with selecting the font monaco uses for measurement, but I can't find how to specify the API for measurement.
Okay, I figured it out.
After reading the editor's source code I found that my global style was interfering with the temporary div width generated by the editor when determining the width.
Refer to this file: https://github.com/microsoft/vscode/blob/d8bc1fa0ff/src/vs/editor/browser/config/charWidthReader.ts
So I found a very stupid but usable solution: (The strange number 50000px is from that file)
*:not(div[style*='50000px']) {
font-family: Helvetica, Tahoma, Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Fira Code", monospace;
}
I have problem in implementing font-weight: 100.
I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.
What should I do? Do I need to import or install something?
I am using reactjs.
<p class="thin">Test</p>
.thin {
font-weight: 100;
}
In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).
If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).
EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :
#import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: 'Roboto';
font-weight: 700;
}
<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>
In this case, the render may differ from one browser to another, although it usually don't.
If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)
If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.
I have a contentEditable <div> which I'm turning into a very simple text editor. When 'tab' is pressed, a bullet point is created using document.execCommand('insertUnorderedList'); which works great. Here's the problem though:
HTML:
<div id="wysiwyg">
</div>
CSS:
#wysiwyg{
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-weight: normal;
font-size: 0.9em;
color: rgb(70,70,70);
}
#wysiwyg ul li {
font-family: 'Calendas Regular', serif !important;
font-size: 1em;
}
When I create a bullet point using the document.execCommand('insertUnorderedList'); though, it gets styled as if it were just any old text inside my #wysiwyg, not as if it were a bullet point, but if I insert some initial text (via HTML, not via using the contentEditable-ness) in the #wysiwyg then it styles bullet points correctly.
Any ideas what's up?
Thanks
Unfortunately, it seems like this is caused by a bug in WebKit-based browsers (see this answer). I tried Safari, Chrome, and Firefox, and the issue only appeared on Chrome and Firefox. Unfortunately, there is not much you can do besides not adding styles, waiting for a fix, or removing the extra HTML. If you would like to remove the extra HTML, you may find Working around Chrome's contenteditable span bug helpful.
Note: This was copied from my comment.
I recently added jQuery mobile to my website.
However, the jQuery theme broke my previous fonts. While most of my page works great, especially the nice jQuery Mobile sliders, I am having a real problem with the fonts.
I have custom fonts set and they work correctly without the jquery mobile css. However, once I include the jquery mobile css it overrides my fonts.
I have tried adding data-role= "none" to the body and the divs but that did not help.
I have also tried adding data-theme = "none" but that also does not help.
Is there a way to disable jQuery custom font-family theming on the body of my page?
Thanks for the help.
Here is my CSS for replacing the entire applications font with Roboto, the Android 4.0 ICS font.
#font-face {
font-family: 'RobotoRegular';
src: url('../font/roboto/RobotoRegular.eot');
src: url('../font/roboto/RobotoRegular.eot?#iefix') format('embedded-opentype'),
url('../font/roboto/RobotoRegular.woff') format('woff'),
url('../font/roboto/RobotoRegular.ttf') format('truetype'),
url('../font/roboto/RobotoRegular.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Android jQM Font Style Overrides */
body * {
font-family: "RobotoRegular" !important;
font-weight: normal !important;
}
You may have to target specific elements too if the above is not enough. I had to also include the following:
.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-bar-a,.ui-body-a,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a$
font-family: "RobotoRegular";
}
I hope you come right. Good luck.
I would inspect the element and find out exactly where the fonts are being specified for example I just found that font's are specified here:
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button
So you can override that in your own stylesheet by specifying the same selector and presenting your own fonts :)
From what I understand... jQuery mobile might just send his own css fonts into your mix. If you have a css file with the font set :
Try some testing by adding !important for your font styles.
Hope this will help you figure out a solution :)
Thanks to the help by agrublev and darryn.ten the following worked for me:
Here are examples to change the shadow of the body and fonts:
.ui-body-c,.ui-dialog.ui-overlay-c{
text-shadow: 0pt 0px 0pt rgb(0, 0, 0);
}
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{
font-family: Helvetica, Arial, sans-serif, Verdana;
font-size: 12px;
text-shadow: none;
color:black;
}
creat your own css for jquery mobile and override font family give your own font family
jquery mobile uses themes. Hit http://themeroller.jquerymobile.com/
set the font in the "global" tab (for me: Raleway, Verdana, etc), download and install the theme and you're set.
For jqmobile, you need to use your theme css, jqm icons, and jqm structure INSTEAD of the usual single jqm css.
overriding stuff in css may get you in different trouble with different browsers... And that's NOT the point with jquerymobile.
How can I set the default font size of tinyMCE , I've a tinyMCE editor and I tried all the things to change the text-size to 14px and it always shows 10px. I'm using rails 3.1 and tinymce
major Version: '3', and minor Version: '4.4'.
I changed tinymce/themes/advanced/skins/default/content.css font-size to 14px
I even add
tinyMCE.init({
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values: "12px,13px,14px,16px,18px,20px",
});
and
body, td, pre { color: #000; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; margin: 8px; }
You can load a custom stylsheet for the textarea:
tinyMCE.init({
content_css : "custom_content.css"
});
In there you can style your fonts like on a normal page.
You need to empty you browser's cache. Sometimes you have to do that to ensure TinyMCE is not using an older file.
[As #Jona and #Nikola said, please make sure you are referencing a new CSS flle].