I am using Markdown in a CMS but am having a problem.
In my style.css file I have the following:
.smallCapsB {font-variant:small-caps;font-weight: bold;}
And I am using the following format.
<li>"May they know that Your name, Yours alone, is the <span class="smallCapsB">Lord</span>, supreme over all the earth." (Tanakh)</li>
While the small-caps portion works, it ignores the font-weight. How can I make it bold?
Related
I am kniting my Rmd to PPT using a custom PPT template with different types of slides. I have all headers/text set to Alright Sans Font, mostly size 11.
When I knit to PPT, that all works except the table ouput is calibri and way too large of font. How can i customize?
How do I reduce vertical spacing between numbered/bulleted lists?
I think this might need to happen in the PPT template but not sure.
What code is needed in Google Colab to change the Markdown font style from its default? E.g., I would like to change it to Times New Roman.
In Jupyter Notebook, the following code works:
## <span style='font-family:Times New Roman'> Hello World </span>
However, this code does not work when I try it in Google Colab, but instead creates the text with the default Colab Markdown font style.
This does not fully answer your question because it does not use markdown but basically does what you want in your example:
you can use the HTML module from IPython.display and run html as code in your cell
from IPython.display import HTML
HTML("<h2><span style='font-family:Times New Roman'> Hello World </span></h2>")
output:
I'm not very familiar with the Colab system but most markdowns doesn't support changing the font family. I would recommend using a form of HTML page that supports CSS to change the font.
Hope that helps!
~ Ryan
The only way I've found to change font on Colab is to change the attribute "face" of the tag "font". For example:
<font face="Rage" size=7 color='#d39aed'> Hello <font>
(note that the font face attribute is not supported by HTML5).
Hope that helps!
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
Using Material Icons, a plus icon can be added as follows:
<i class="material-icons">add</i>
The text add is no longer visible. Why does this happen and where does the plus icon come from? I know it's defined in the font file, but how?
If it's due to the word add linked with the plus icon in the font file, then why doesn't the following work in Bootstrap, with its Glyphicons?
<span style="font-family: 'Glyphicons Halflings'">\20ac</span>
EXPLANATION
When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:
[MANDATORY] the list of characters
[MANDATORY] the hexadecimal codes of those characters
[OPTIONAL] one or more aliases/alternative names for those characters
The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.
Essentially, when using a character/icon from a font file with ligatures, we have the option to use
the 'regular' hexadecimal code: <i class="some-font-with-ligatures">&#xxxx;</i>
or the alternative/alias/ligature name: <i class="some-font-with-ligatures">ligature-name or alias</i>
That is probably all the important info for a web designer to know.
EXTRAS
Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.
And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:
start the APP, select an icon and select 'generate font' (bottom right)
Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)
Material Icons. It is possible in a font to define special glyphs for combinations of characters. An example in English is the glyph æ, which is a combination of a and e. This is called a ligature. Other examples are special renderings of ff, ft and tt. Instead of drawing an f followed by another one, the two glyphs are drawn as a single connected glyph: f f versus ff. What the designers of the Material Icons set did is (ab)using this system to make it easy to use icons.
Let's take a step back for a moment. You'll notice in the usage of the add icon that it is possible to include it by directly using a character code that is mapped, in the font, to the correct icon.
<i class="material-icons"></i>
This refers to Unicode character U+E145, which falls in one of the Private Use Area blocks of the Unicode specification. This means that no character is usually assigned to this position and every font designer is free to put any glyph they want at that position. Google chose to put the add icon at that spot. Thus, this character, with font family Material Icons, will render as a nice icon.
In addition to that, they created a ligature in their font family that says that the combination of characters add should be rendered as the same glyph. When browsers support ligatures in their font rendering engine, this will result in the same output as using  would.
Google documents this very briefly as well.
In a nutshell: both (U+E145) and the string add will render as when using Material Icons.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
As character: <span class="material-icons"></span>.<br>
As ligature: <span class="material-icons">add</span>.
Boostrap and Glyphicons. The Glyphicons font does not define ligatures, but referencing the correct characters definitely does work. This is exactly what Bootstrap does, by setting (for the plus icon from Glyphicons) content: "\002b";. This sets the content of the span it is applied on to the character represented by the escaped code point U+002B, which is the plus sign. The Glyphicons Halflings font family renders this as some sort of icon, just like Material Icons. The only difference is that the icon is represented by a different character.
Why does using \002B in a span not work, you ask? That's because escaping a Unicode character in CSS is different than in HTML. In HTML, you'd use + instead (or € to get the example you have in your question). You can read more about escaping here.
Thus, + (U+002B) renders as and € (U+20AC) renders as when using the Glyphicons Halflings font family. You'll notice that for the Glyphicons, they chose to use characters resembling the icons, whereas Material Icons use special, reserved characters.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="font-family: 'Glyphicons Halflings'">+ €</span>
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.