If I change the default display font settings in Chrome (Settings > Appearance > Customise fonts) to anything different but default. My webpage does show the change in font.
How it should look like Default/Changed (Times New Roman/Cascadia Code):
Example of a font change on Wikipedia
The font of the page does not change despite changed settings for the font.
The font of a webpage is determined by the CSS styles defined in the HTML code of the page. Changing the default font settings in your browser only affects the font used for the UI elements of the browser and not for the webpages.
To change the font of a webpage, you need to update the CSS styles for that page to use the desired font. This can be done by adding a font-family property to the CSS styles for the elements you want to change the font for.
Related
I'm trying to achieve a sort-of-Microsoft Word control panel, which allows you to edit and format text. It works but it's not smooth at all. When I change the font-weight or the font-style of the element, the font quickly changes to the browser's default one before loading the selected one. Is there a way to at least improve this performance?
maybe the font-weight you set at this moment doesn't exist for that font family.
Did you try with other font?
How to create dynamically (working even after editing element background on 'inspect element' option in the browser) text color based on background? I would like it to work on all divs in the body section.
HOW IT SHOULD WORK? Example:
There’s container div with background white (specified in CSS), text is default black (not specified in CSS). I run dev tools -> inspect element and with them I change the container background color from white to black.
Result? The text has also changed - from the default black to white, dynamically - based on the background color. you did not even have to refresh the page. this is how it all should work. Question: how to create that in Javascript, it is possible?
Deeper explain in the comment section
You can use the invert function of css without using JavaScript. Just use the same color for the background and the text, and then add the following code to the css of the text and that's it:
filter: invert(100%);
I have a CKEditor for editing the content of a blog. Sometimes there are blogs that got dark background color and therefore use white as font color. As the default background color of CKEditor text editing area is white, all text can only be seen with highlight.
While I want something like this (but only when the font color is white):
I am using CKEditor 4.6. How can I change the background color of the CKEditor on the fly according to the font color the user choose?
One option would be to use the Div Editing Area add-on, to inherit the web page CSS styles (font color and background color):
This plugin uses a <div> element (instead of the traditional <iframe>
element) as the editable area in the themedui creator. Much similar to
inline editing, it benefits from allowing the editor content to
inherit from host page styles.
I just wanted to know if it was possible to define CSS styles for certain font families within CSS. I'm open to Javascript solutions as well.
For example, I want to decrease letter-spacing on a particular font, but if one of the fallback fonts are used, I don't want to apply this letter-spacing.
I have a problem with some users on my application. These users modify the text size (with display option in browsers) and after, they send a bug to say the application doesn't work because the text is to small.
Is it possible in javascript to have an event when a user modify these options ?
How can I catch it ?
This jQuery plugin seems to do exactly this:
https://github.com/johnantoni/jquery.onfontresize
The idea of this plugin is to have an iframe sized in em and a script in the iframe that is triggered on onresize. So if the user changes the size of the font in the window the iframe is resized and gets an resize event. This event can then be passed to the parent.
The problem is that the plugin was not updated for 3 years but i don't think it would be a big deal to bring it up to date.
In addition you need to check for the correct font size on document ready.
EDIT I check it with current jQuery version and IE. The plugin triggers the event if the font size is changeable via View > Text Size (when the pages font size is set with em or %) it the pages font size is set with px then the size of the font is not changing hence no event is triggered.