i'm working on a web site and i want to use persian/arabic numbers. but when i write the number, the numbers shown in english format.
also i tried for this code :
<html lang="fa" dir="rtl">
but it doesn't works for me. please show me a way.
its my web site :
http://follower.siblearn.ir
i wanna change the 2.500 and 5.000 to the persian/arabic format.
You should use Persian or Arabic font family like this:
body { font-family: 'B Koodak',tahoma; }
before that, add some code like this to your html header:
<link href='http://www.fontonline.ir/css/BKoodakBold.css' rel='stylesheet' type='text/css'>
remember you can use your favorite fonts from online or hosted files.
{ font-family: 'B Koodak'; }
on every tag or class you want to apply for numbers
Related
I am using 2 google font families and have them declared as:
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">
I want to add one font-family (Parisienne) and I only need the ampersand character (&). I understand this can be done using the 'text' parameter (https://developers.google.com/fonts/docs/getting_started).
However if it is possible I want to add it to the existing link tag. I have tried the following:
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700|Parisienne&text=%26&display=swap" rel="stylesheet">
But doing it this way seems to write the logic as "load all 3 font families but just the amperand character for each one". Which is kind of expected but I at least wanted to try it. I tested this and indeed the only character in each font that works/is downloaded is the ampersand
To make it work I have 2 seperate link elements:
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Parisienne&text=%26&display=swap" rel="stylesheet">
Is there any way to use only one link tag and have it load the entire Roboto and Monteserrat families and only the ampersand character of the Parisienne family? If not then having 2 seperate link tags is fine but if there is any way to do this with just one link tag it would be nice to know how.
According to Google, the key text counts for the entire request URL. Thus, no way we can achieve that with a single <link>.
I am using 1st-time #font-face and facing some issue that my form label need two languages (1) English and (2) Hindi
I want the content of the text box in Hindi instead of the English alphabet.
For Hindi font I made below CSS added external CSS font but it's not coming on my form, then I called my class into my HTML but HTML is taking junk values, I don't know where I doing some mistakes please suggest me a solution.
#font-face {
font-family: hindi !important;
font-style: normal;
font-weight: 400;
src: url('file:///C:/Users/Tapas/Desktop/java%20script/es6/Kruti_Dev_010.ttf');
}
.lang-hindi {
font-family: hindi !important;
}
<p class="lang-hindi"> kaise ho</p>
I am expecting the Hindi alphabet as an output but it's showing only the English alphabet, can anyone please help me with the solution.
go to this site: https://www.web-font-generator.com/
upload your (Kruti_Dev_010.ttf) generate the web font
download generated font there will be CSS file in download files along with .woff, .svg, .eot and .ttf files as well
copy CSS style and correct file paths then use it into you web page
To use kruti dev font you cannot type the text like 'kaise ho' you need to use hindi keyboard layout to type -
so for example if you want to write
then you will in your html you will write - 'lkoZtfud izU;kl efUnj Jh egkdkys'oj '
You can better use Google Fonts, https://fonts.google.com/
Select your font over there, and add this to your web-page.
The answer you are looking for is a bit difficult but you can write whatever your desired text using google font and it will work on all browsers.
I want to add emojis in a html page, eg. 🇬🇧 but they do not render with the colorized icon.
I tried the follwing
<meta charset="utf-8" />
<body>
🇬🇧
🐑
</body>
</html>
And it does not show the colorized icons of the UK flag and sheep respectively. I as well tried wrapping the emoji characters in a span but it neither works. Maybe is something related to the fonts?
The rendering of the emojis is depending on the font you use to display them. Emojis are just normal characters like the letter "A" and need to be defined in the font you are using on your page. To display emojis correctly, you need to use a font which has these emojis defined and set the <span> (or your whole page) to use that font (with CSS).
Here is an explanation on Emojis. And here is an example on how to use the Google Noto Emoji Color font (free to use) on your website:
1- Download the font (here)
2- Embed it into your CSS:
#font-face {
font-family: "Noto Emoji Regular";
src: url('NotoEmoji-Regular.ttf') format('truetype');
}
Make sure the url has the right path to the local .tff file and add this to your page <style> definition or CSS file.
How can I test if a particular web font contains a particular Unicode character? I can't simply include the character in some text, because a browser's font substitution mechanism may choose another font to display the character.
EDIT
This is the best solution I have been able to come up with so far:
First, you must download the LastResort font from Unicode: https://www.unicode.org/policies/lastresortfont_eula.html. (This is a bit tricky - I kept getting "network error", but in the end I succeeded.)
The LastResort font allegedly has a replacement icon for every Unicode character.
Now, let's assume that I want to check if the Google fonts "Pacifico" and "Merienda" contain the Unicode characters F and Ф (Unicode character 0424). I can use this code:
<!DOCTYPE html>
<html>
<head>
<title>Font detect</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda">
<style>
#font-face {
font-family: 'LastResort';
src: url('LastResort.ttf') format('truetype');
}
p.pacifico {
font-family: Pacifico, LastResort;
font-size: 60pt;
}
p.lato {
font-family: Merienda, LastResort;
font-size: 60pt;
}
</style>
</head>
<body>
<p class="pacifico">F Ф</p>
<p class="lato">F Ф</p>
</body>
</html>
This will display thus:
For Pacifico, both F and Ф are displayed, but for Merienda the Russian character Ф is replaced by a default icon from LastResort. So Pacifico contains Ф, Merienda does not.
Now, I don't know if this is a foolproof method, and I don't know if there is a simpler way to do it.
Wakamai Fondue is a tool that will tell you about which characters a font contains. It'll also tell you about any OpenType feature inside the font, and some more details. (Full disclosure: I wrote that tool)
If you want to check it at the client side, I think there's no way around trying to render the character and then check if it's actually been rendered. If you use Adobe Blank as a fallback font you could check if it rendered the character (width would be > 0) or not (width would be 0).
imagine that you want to design a website that learns English to Iranian people (Persian (Farsi) language) . English and Persian (Farsi) doesn't have any similarity in alphabet because Persian is RIGHT TO LEFT and English is LEFT TO RIGHT and completely are different . i didn't find any tags to set one font for all Persian (Farsi) words and other font for all English words . for example set B-Nazanin for Persian and set Times New Roman for English automatically that don't need to define font for every word every time . just define once these fonts . what can we do ?
thanx
One possible option is to give a lang="fa-IR" attribute/value to the <html> or to any other elements within the document when the website is shown in persian language.
Hence you can override CSS declarations by using [lang|="fa"] selector.
For instance:
[lang|="fa"] p { font-family: "B-Nazanin"; }
<html lang="fa-IR">
<p> سلام دنیا </p>
</html>
Or:
p[lang|="fa"] { font-family: "B-Nazanin"; }
<p>Hello World!</p>
<p lang="fa-IR">سلام دنیا!</p>
you can use the following link for this purpose:
Display text with two language in webpage with different fonts with font-face at rule in css
#font-face { /* Persian Font */
font-family: 'MyFont';
src: url(Fonts/BYekan.ttf);
unicode-range:U+0600-06FF;
}
#font-face { /* english font */
font-family: 'MyFont';
src: url(Fonts/ALGER.TTF);
unicode-range: U+0020-007F;
}
Usage:
body{
font-family: 'MyFont';}
tip: for different languages you can use different "unicode-range".
using style content by language in HTML is to use the :lang selector in your CSS style sheet. ex :
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
and dont forget use lang in you HTML code
<p lang="en">Ceci est un paragraphe.</p>
If you really want to use two different fonts for two different languages, your options are:
1) Use some markup that distinguishes between the languages. This could be a class attribute or (more logically, but with slightly more limited browser support) a lang attribute. Of course, you would use this for the language with smaller frequency. This is a lot of work of course. Depending on content generation system, it might or might not be automated.
2) Select the fonts so that the primary font does not contain glyphs for characters in the other language. For example, if you set * { font-family: foo, bar } and foo contains Latin letters but no Arabic characters, foo will be used for English and bar for Farsi. Punctuation characters would still be a problem. More importantly, it will be hard to find such fonts.
3) Use CSS code that selects font family by Unicode range. I won’t go into details, since this approach has too limited browser support to be practically useful yet.
However, it seems that you are trying to create a problem rather than solve one. By typographic principles, the same font should be used for copy text if possible. You should select a font that is suitable for both English and Farsi, or better still a list of such fonts (since no font is available on all computers), or a downloadable font of that kind. Failing that, you might select two fonts, or two lists of fonts, carefully selected, so that you list them both or all and browsers will use them in a natural way: using, for each character, the first font in the list that contains it.
use B-Nazanin or others for persian content and use Open sans for english contect.
If you want to set B-nazanin for persian and set open sans for english, try this code in css:
body{
font-family: "Open sans","B-nazanin";
}
If I understand your question correctly, you will mix Farsi and English on one web site.
Assign two classes, perhaps "farsi" and "english" with appropriate font-family declarations. Then put the Farsi text inside <div class="farsi"> and the English in <div class="english">.
Edited to address mixing languages: You put the <div> around the primary language and use <span> for words in the other language.
I don't think there is an easy way to finely mix languages with different alphabets and even writing directions. Perhaps you can use a macro in your HTML composition tool, or something, to accomplish adding the necessary tags.